SOS Desastrada: Como Colocar Miniaturas De Post Recente No Blog

Hey todo mundo! Tudo bem com vocês? como sabem tem uma categoria só de Blogosfera aqui no blog onde procuro ensinar tutoriais, e explicar algumas coisas algumas ferramentas
que uso aqui no Doce Primavera. Bom hoje vim trazer pra vocês como se colocar aquela miniatura de post recente que fica bonitinho em baixo do nome do blog rs Vamos aprender?

Copie o código abaixo e siga as instruções:

<br /><br /><center><style type="text/css">

.bsrp-gallery { width: 1200px !important; background: #fff; margin: 0 55px 0; clear:both; margin-top: 20px; float: center !important; text-align: center !important; }

.bsrp-gallery:after { display: table; clear: both; background: #fff; }

.bsrp-gallery .bs-item a { border: 8px solid #fff; position: relative;background: #fff; float:left; margin: 0 0px 10px; margin-right: 20px; text-decoration:none; }

.bsrp-gallery .bs-item .ptitle {

background: rgba(53,50,49,0.7); display: block; transition: ease .7s; clear: left; font-size: 20px; font-family: 'Montserrat'; text-transform:none; line-height:1.3em; font-weight:400; height: 25%; width:91%; position: absolute; bottom:0%; text-align: center; padding:80px 10px 80px 10px;

color:#fff; word-wrap: break-word; overflow:hidden; text-transform: uppercase;

padding-top: 85px; 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; transition: ease .7s; opacity:0.9;}

.bsrp-gallery a img {float: left;}

.bsrp-gallery a:hover img {}

</style>

<script>

//Postrecente

function bsrpGallery(root) {

var entries = root.feed.entry || [];

var html = ['<div class="bsrp-gallery nopin" title="Código por postrecentes">'];

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/AVvXsEiiMzIHkZSxOLvmEy9RQQY4vrxytxEEJO6uKUK6QSm4Pcss9yLPFHmJF1qUpo2bTFmVqM7CMCTiL7FDJszIrnaJpcBhRc23_KjEn3vmAgkwUSeD-uEkx5R-UhqOjSTM-hhlMAERVx1mMJw2/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 = 220;

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>

Agora entre no painel de controle, clique em layout, abaixo do cabeçalho adicione um widget, e cole o código que copiou. E pronto só visualizar e ficará assim ♥