Galeria de postagens populares/aleatório

Galeria de postagens com miniatura de imagens, utilizar um gadget de miniaturas é uma ótima forma de manter o leitor mais tempo no blog. Esse gadget que vou compartilhar com você exibe suas postagens recentes, ou aleatórias do seu blog. 

Abra o painel do seu blog, e clieuq Adicionar um gadget e escolha a opção HTML/JAVASCRIPT. Aperte Ctrl+F e cole o código abaixo dentro dele. 

<center><style type="text/css">
/* Galeria de postagens */
.bsrp-gallery {
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 15px 15px 0 !important;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #7f7f7f; /* COR DE FUNDO DA LEGENDA */
display: block;
clear: left;
font-size: 11px; /* TAMANHO DA FONTE DA LEGENDA */
line-height:1.3em;
height: 2.6em; /* ALTURA DA LEGENDA */
position: absolute;
text-align: left;
bottom: 10%;
color:#fff; /* COR DA FONTE DA LEGENDA */
padding:1px ;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
padding: 1px;
float: left;
height: auto;
border: 1px solid #000;/* COR DA BORDA DA MINIATURA */
}
.bsrp-gallery a:hover img {
height: auto;
padding:1px;
border: 1px solid #ff0000;/* COR DA BORA EM ESTADO HOVER */
}
/* FIM DO CSS  */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFHDgSBMOpkNa9RXQ856SLq_yB12z-qk81LzTlPAJt__wNJQA2YGAqSWcY-g-KB6j38V7hSUWEGHTGKY9bIu0Mj50LwJnZ2YAtcUR-c_Hx8qZ4K0uXs43xoInJQrvA-u6og7-iQqLqfnn/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = (5 +(2*(hoje.getSeconds())))
var bsrpg_thumbSize = 100; /* TAMANHO DA MINIATURA */
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=6&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

Faça as alterações que desejar para combinar com seu blog, e clique em salvar. Arraste o gadget para onde desejar que fique nas colunas. Sugiro que fiquei sobre o cabeçalho, ou abaixo dele.

Tido que estiver em capslock pode ser alterado, adaptando a aparencia ao seu gosto. Para alterar a quantidade de postagens exibidas troque: numposts+"&max-results=6

Pelo numero que desejar. 

Do jeito que está o gadget  exibirá postagens aleatórias. Se desejar exibir suas postagens recentes troque: numposts = (5 +(2*(hoje.getSeconds())))

por

numposts = 1

Se você exibe, por exemplo, 5 postagens em sua página inicial do blog sugiro que o gadget mostrar as postagens recentes à partir da 6ª postagem, pois assim ele tem mais utilidade. Para fazer isso troque o número 1 pelo 6; assim o gadget começará a exibir suas postagens mais recentes à partir da 6.

AVISO: Só funciona na versão aleatória se o blog tiver ao menos 60 postagens, tá? Se tiver menos que isso ele não aparecerá. Na versão recentes funciona com qualquer quantidade de postagens.

Créditos: Eliane