TUTORIAL: Postagens recentes em miniatura

Olá pessoal, hoje vim ensinar a fazer aquelas miniaturas de postagens recentes, como essa:

Primeiramente, gostaria de agradecer ao blog Janaína Poderon, pois foi lá que aprendi a fazer essas miniaturas.

1. Vá no painel do blogger > LAYOUT > ADICIONAR GADGET > HTML/Javascript.

2. O gadget precisa ser abaixo da header (topo), para ele ficar correto.

3. Nesse gadget, cole o seguinte código (para colar, selecione tudo, clique com o botão direito do mouse, e selecione COPIAR, ctrl+c não funciona aqui!):

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
width:1130px;
margin-top: -30px;
background: #ffffff;
box-shadow: 0px 2px 10px #ECECEC;
padding: 20px;
margin-bottom: 30px;
height: 290px;
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-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: rgba(0,0,0,0.5);
display: block;
clear: left;
font-size: 15px;
text-transform:uppercase;
line-height:1.3em;
font-weight:700;
height: 50%;
width:79%;
font-family: Bitter;
position: absolute;
bottom:0%;
text-align: center;
OUTLINE-STYLE:DASHED;
OUTLINE-WIDTH:1PX;
OUTLINE-COLOR: #ffffff;
OUTLINE-OFFSET: -6PX;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#ffffff;
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
}
.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="Pegue esse código no Illustrarte Design">'];
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/AVvXsEjBM4U9OC_Gm_g98giUy3CKQ8SF9qZrE5N4FHcmwcmzxN-IUG1wujfAs45sk0zpQOig5qPnsQIWn8cIzUMumj4lvYest_mt2_tysGgO4hR2ss4C-z7iYbl52cLk35pBXdpkS41yKkocExI/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 = 272;
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>

4. Pronto! Suas miniaturas estarão funcionando!

Se copiar esse tutorial, credite! Pois esse código é somente do Illustrarte Design.