Blogger: Miniaturas dos últimos posts

Oi pessoal, como estão?

Esse é um dos tutoriais mais pedidos por vocês, inclusive lá no grupo do Facebook (se você ainda não participa, vem correndo! :D), então, antes tarde do que nunca, cá estou eu com o tutorial.

• 1 – Em MODELO > Editar HTML pesquise por ]]></b:skin> e acima dele cole:

/* Miniaturas dos últimos posts
-----------------------------------------------*/
.bsrp-gallery {
width:100%;
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 0;
text-decoration:none;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery .bs-item .ptitle {
background: #b8d8dd;
display: block;
clear: left;
font-size: 16px;
text-transform:uppercase;
line-height:1.3em;
font-weight:300;
height: 48%;
width:79%;
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#555;
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a:hover img {
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}

– Em vermelho está a cor do fundo que aparece quando o mouse está em cima da miniatura. Modifique se desejar.

• 2 – Em LAYOUT, adicione um widget HTML/Java Script e dentro dele cole o seguinte código (deixe o título em branco):

<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" >'];
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://lh5.googleusercontent.com/-iaKQ-tiz6KE/VPyO2GnMRXI/AAAAAAAADrc/si7De0SoFO0/s300/semimagem1.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 = 3;
var bsrpg_thumbSize = 220;
var bsrpg_showTitle = true;
document.write("<script src=\"http://www.ENDEREÇO-DO-SEU-BLOG.com.br/feeds/posts/default?start-index="+numposts+"&max-results= 3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

– Em vermelho está a URL da imagem padrão, que aparece quando o post em questão não tem imagens. (veja modelos gratuitos abaixo)
– Em azul {duas vezes} está o número de miniaturas a serem exibidas.
– Em verde está o tamanho da miniatura em pixels.

IMAGEM PADRÃO

Para a imagem padrão fiz 8 modelinhos que podem ser baixados gratuitamente. Basta hospedar no Picasa Web de vocês, clicar com o botão direito e copiar a URL, depois substituir pelo código informado no passo 2.

DOWNLOAD

OBSERVAÇÃO IMPORTANTE:
– Para esse tutorial funcionar, seu blog precisa estar público e com o Feed ativo.

Espero que ajude, qualquer dúvida comente!