[TUTORIAIS] Miniatura das postagens recentes com efeito fade

Olá queridos(as)! Tudo bem?

Viram essa lindeza que apareceu aí no topo do blog? Essas miniaturas recentes com efeito fade na imagem toda?

Para quem não sabe, o efeito fade é aquela transparência da foto quando passamos o mouse. Junto com essa transparência vem o nome do post.

Estava vendo muitas blogueiras com esse modelo e estava torcendo para alguém fazer um tutorial com ele õ/ hahah

Aí a Elaine Gaspareto veio e trouxe ele bonitinho assim pra gente. Portanto, o crédito do tuto de hoje vai pra ela! ♥

O efeito que teremos será esse da segunda imagem.

Então, estão a fim de aprender?

Tudo o que você tem que fazer é abrir o seu layout, adicionar um gadget e escolher a opção html / java script. Então você copia o código abaixo:

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==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 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#fff; /*--cor de fundo das miniaturas ao passar o mouse --*/

display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#666; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/*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/AVvXsEh2bpTsGDI7ZCpXsSmjZwbUvBcSN3F-Td7i_iSfxJWSJp_44BNvF2jlgHI1Bqy5bnFQ3nvCYchKzY57KmTBD15GCUNlgh8lSlbF1xJ9BNNzd-QD4GPYX80adXozdCIXT2ayaIDNnchv-Jec/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="' + '">' + 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 = 280;

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>

Os lugares alteráveis já estão escritos no próprio código, e eu consegui alterar tranquilamente.

Das primeiras vezes que tentei usar esse código, por algum motivo não funcionou. Tirei, coloquei, e simplesmente não aparecia nada no blog, como se não tivesse gadget nenhum. 

Pra mim, só funcionou quando eu posicionei o gadget no crosscol-overflow, ao invés do crosscol.

Bem aqui.

Então, se tiverem o mesmo problema, tentem isso que deve dar certo. Comigo deu.

E aí, conseguiram? Gostaram? ♥

Beijocas da Thais