Postagens Recentes com Imagens em Miniatura

Boa tarde pessoas que eu adoro! Hoje vou fazer um tutorial, já tem muito tempo que não faço um post de tuto, mas hoje um blogueiro pediu e eu vim atender ao pedido dele. O tutorial é de como colocar gadget de postagens recentes com imagem em miniatura, igual a que eu uso. Eu aprendi esse tutorial no blog Mega Feminina, desde já informo que os créditos são de lá. Mas o código colocado aqui é igual ao meu, já editado ok?. Então vamos ao que interessa. faça backup do seu template antes de começar ok. O tutorial é bem simples pois usa JavaScript então em Layout clique em Adicionar um Gadget>>HTML/JavaScript e cole o código abaixo:

<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: 0px 10px 10px 0px !important;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #fff; /* COR DE FUNDO DA LEGENDA */
opacity:0.8;
display: block; 
clear: left; 
font-size: 14px; /* TAMANHO DA FONTE DA LEGENDA */
line-height:1.3em; 
height: 2.6em; /* ALTURA DA LEGENDA */
position: absolute; 
text-align: left; 
bottom: 05%; 
color:#EC0076; /* 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 #fff;/* COR DA BORDA DA MINIATURA */
}
.bsrp-gallery a:hover img {
height: auto; 
padding:1px;
border: 1px solid #EC0076;/* 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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1axm7AAENivf2uMfTKv1T0c6roMjUBc4EdHDl4Xhksdy_cIp8vR_6AsjSqBhUbYJbHSBL_qhScx2BW9hmbNs1H1522rxmLSFsa3AB1OEZejK-9t_J6e7udG1fJvBqPoZji5XF-Nqc18c/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 = 85; /* TAMANHO DA MINIATURA */
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=12&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

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


O ideal é colocar o gadget entre o post e o menu, ou no footer dos post, abaixo da área das postagens. O código está editado para sidebar, e fica igual ao meu. Onde está marcado em vermelho numero 1 é o que determina se as postagens vão ser mostradas da  ultima para as demais, estando o numero 1 vai aparecer todas as postagens recentes, se quiser pode alterar para o numero que corresponde a paginas exibidas no blog, por exemplo: se vc mostra 5 paginas no blog, marque 5 para que ele mostre as paginas que não aparece em primeiro plano. O que deve ser mudado está em Caps Look, se for colocar como o indicado acima, mude o tamanho das imagens para 100. Espero que tenham gostado, qualquer duvida deixem nos comentários que eu respondo assim que puder. 

Beju >.<