Olá meu povo! Antes de mais nada quero deixar os créditos para o blog da Karoline de "Follow your Dreams", esse código é do blog dela, e eu apenas fiz algumas alterações no script e no css, apenas isso. como vocês podem ver o resultado final clicando aqui. Essa postagem é a continuação de como criar um layout do zero, mas agora estaremos personalizando ele. Acredito que vocês gostam desse tipo de efeito, "yo tambien...!" :D Vamos para o tutorial.

Vocês tem 3 locais onde pode aplicar o script, escolhi o primeiro, fica no critério de vocês.. Blz ;)

1. Procure por <div class='post-footer-line post-footer-line-1'> clique dentro da caixa de código e dê ctrl + f e depois enter, após achar cole o código abaixo  de <div class='post-footer-line post-footer-line-1'>.

<!-- POSTS RELACIONADOS -->

<script type='text/javascript'>

$(document).ready(function() {$(&#39;.resizethumbnail&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s420-p&#39; );});});

</script>

<script src='http://static.tumblr.com/pfobaef/Tp7oc9v3v/posts-relacionados-blogblackrose.js' type='text/javascript'/>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=4; /** AQUI... SE QUER MAIS DE 4 IMAGENS ALTERE O NUMERO **/

var relatedpoststitle=&quot;Veja também:&quot;; /** TÍTULO VEJA TAMBÉM **/

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div>

<!-- FIM POSTS RELACIONADOS -->

2. Agora procure por ]]></b:skin> e acima dele cole o código à seguir.

/* Posts Relacionados
----------------------------------------------- */
#related-posts {
width: 100%;
margin-top: 10px; /* margim p/ cima */
margin-left: 4px; /* margim esquerda */
padding: 0 0 180px; /* espaço abaixo */
}
/*** Titulo VEJA TAMBÉM ***/
#related-posts h2 {
color: #000; /* cor da fonte */
font-size: 15px; /* tamanho da fonte */
font-family: sans-serif; /* fonte */
text-align: center; /* fonte centralizada */
text-transform: uppercase; /* fonte em letra maiuscula */
letter-spacing: 1px; /* espaço entre as letras */
}
#related-posts img{
margin: auto;
}
#imagem {
width: 153px; /* largura das imagens */
height: 153px; /* autura das imagens */
border-radius: 50%; /*Retire essa linha se quiser as imagens quadradas*/
}
#texto {
position: absolute;
background: rgba(0, 0, 0, 0.8); /* cor do fundo "background": efeito hover */
border-radius: 50%; /*Retire essa linha se quiser as imagens quadradas*/
width: 113px; /* largura do background */
text-align: center; /* fonte centralizada */
height: 73px; /* autura do background */
margin: -157px 0px; /* margim p/ cima */
padding: 40px 20px; /* espaço */
font-size: 18px; /* tamanho da fonte */
color: #ffffff; /* cor da fonte */
opacity: 0; /* opcacidade 0 */
}
#texto:hover {
opacity: 1;
}

3. Agora só salvar!