CPT - Centro de Produções Técnicas

Miniaturas de posts no rodapé do blog


Uma das formas mais eficazes de fazer com que os leitores permaneçam por mais tempo no seu blog, são os posts relacionados.


Este gadget é um pouco diferente do gadget "Posts relacionados", ele não mostra posts que tenham relação com o post da página.
Ele mostra postagens de forma aleatória, mas só para sites que contenham mais de 60 postagens, para blogs que tem menos que 60, o gadget mostra as 6 últimas postagens.

De qualquer forma, ele é muito útil para fazer com que seu site cresça.

Copie este código abaixo, acesse o painel do seu blog e clique na aba LAYOUT. Clique em ADICIONAR UM GADGET e escolha a opção HTML/JAVASCRIPT, na janela que expandir cole o código copiado.

 <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 */
}
/* BloggerSentral Recent Posts Image Gallery CSS End */
</style>
<script>
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
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 : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/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>
 
 
Tudo que pode ser alterado no código está com letras maiúsculos: 
Neste trecho: numposts = (5 +(2*(hoje.getSeconds()))) 
 
o número 5 corresponde as caixinhas exibidas, o número 2 representa a quantidade de linhas. 
Lembrando que seu blog deve ter no mínimo 60 postagens para que este código funcione. 
Mas não se preocupe, se seu blog tem menos de 60 é só trocar este mesmo trecho
 
 
numposts = (5 +(2*(hoje.getSeconds())))
por
numposts = 1 

Esta troca vai fazer com que seu blog exiba as 6 últimas postagens.
Se você exibe 5 postagens na sua página inicial,
sugiro que troque o número 1 pelo 6.
 
Este gadget foi desenvolvido pelo site http://www.bloggersentral.com/, 
que é todo em inglês, 
a fonte que encontrei em português é http://www.elainegaspareto.com/.