Menu

Anuncios


Em outras postagens eu ensinei a botar artigos relacionados no seu blog usando 2 lpeep, Linkwithin e Outbrain. Mas se você perceber, eu agora não estou usando nenhum dos três.
Eu achei um código que dá mais liberdade.

Este código permite modificar a aparência como tamanho da legenda, cor da fonte, borda etc.

Ainda você pode escolher livremente quantas postagens deseja mostrar.
Veja como fica:




Este código mostrará postagens aleatórias mas você pode modificar se quiser.

Copie e cole este código no bloco de notas e modifique se desejar, o que está indicado por 
negrito.
---------------------------------------------------------------------------------
 <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>

-------------------------------------------------------------------------------




Para alterar a quantidade de postagens modifique onde está o número 6 pelo número que desejar:

numposts+"&max-results=6




Se não quiser as postagens aleatórias e preferir mostrar as mais recentes troque todo o 
código:

numposts = (5 +(2*(hoje.getSeconds()))) 
por numposts = 1









Se você preferir exibir postagens por exemplo a partir do 5ª ou 6ª, troque o número 1 pelo 5 ou 6. Então começará a exibir postagens mais recentes a partir do número que você escolheu.

Eu acho melhor assim pois se o teu bolg já exibe na página principal de 3 a 5 postagens seria melhor sugerir aos leitores buscarem a partir destas pois as anteriores já estão sendo 
avistadas.


PS - Lembre-se este código está para postagens aleatórias então só vai mostrar aleatoriamente se você tiver mais de 70 postagens. Se este não for o caso, prefira fazer a alteração 
que o permita mostrar postagens mais recentes.

Feito isso copie o código alterado e vá em Layout > Adicionar Gadget > Html/javascript e cole o código. Salve.

Você pode escolher onde quer posicionar o gadget. Pode ser acima das postagens ou 
abaixo delas. Fica ao teu critério.




Este gadget foi desenvolvido por Blogger Sentral site em inglês.
Este artigo te ajudou? 
 
Top
Google