Slide com miniaturas de posts recentes

Oi amores, tudo bem? Hoje trouxe um tutorial para salvar vidas. Eu sempre gosto de deixar um menu com postagens recentes no topo do blog. Acho que fica lindo e ajuda os leitores. Porém nunca tinha achado um 10/10 que eu amasse todos os pontos deste "slide". Pois bem, procurando algum tutorial legal pelo blog, eis que encontro um código maravilhoso (este do topo do blog) e quis compartilhar com vocês.
Encontrei o código no blog Um Container, não sei se foi o mesmo que criou, porém fica os créditos.

Vamos ao passo a passo:

1- Vá no Painel do blogger >Layout> Adicionar Gadget > HTML/JavaScript. No Gadget Adicione o Código a baixo :

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1300px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#000; /*==COR AREA DE TITULO==*/
display: block;
clear: left;
font-family: 'georgia', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:13px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
text-align: center;  /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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/AVvXsEiCLdTLsLaynj4VDdcC9U_Qos2GBQ-TFC45EeJOeImuM2WMwvZYCUymrYO5B2bo5yb1nWxE1vnFwfFHsYj3y6yyXo-1-jbjaZZcck6V2_h9wQcwy-2ls8FDUJU9DfDYIXheKMBX2LCKyu4K/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 =1
var bsrpg_thumbSize = 255;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
Adaptando o código:
4&orderby: Coloque a quantidade de posts que você deseja.
/feeds/posts/: Coloque seu url do blog, antes da / do feed para funcionar o código.
var bsrpg_thumbSize: Tamanho da miniatura que deseja.

Pro código funcionar, seu blog tem que estar em modo publico. Bem fácil, né? Espero ter ajudado! ♥

You Might Also Like

1 Comments

  1. Esse post me ajudou muito mesmo, eu estou mexendo no layout do blog só que ele já tem isso instalado no layout só que parou de funcionar e eu não tava entendendo o porque. Graças a esse post eu entendi eu tinha colocado meu blog privado para fazer as alterações mas não fazia ideia que fazendo isso o slide com miniatura só funciona quando está em modo publico.

    Obrigada

    ResponderExcluir