Postagem Relacionadas no Post do Blog

Olá, tudo bem? Hoje trouxe um tutorial bem legal para você, vou mostrar como colocar postagens relacionada no seu blog, fica bem útil para o blog, pois ele mostrará outras postagens relacionadas e os leitores poderão se interessar em lê outras postagens...Vamos começar:

• 1 -Painel Principal
• 2 -Modelo
• 3 -Editar HTML
• 4-Agora clique em qualquer lugar dentro da caixa de HTML e clique em Ctrl + F e procure por:

</head>

• 5-E cole o seguinte código acima de </head>:

<!--Postagens relacionadas-começo-->
<script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/>
<!--Postagens relacionadas-fim-->

• 6-Agora você vai procurar no Ctrl + F o seguinte código: 

<div class='post-footer-line post-footer-line-1'>

• 5-E abaixo dele você coloca este código:

<!--Código Postagens relacionadas Início-->
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Veja também:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!--Código Postagens relacionadas Final-->

• 6-O número 4 em "var maxresults=4;" no código acima pode ser subtituído pelo tanto de miniaturas que você quer que apareça no final do seu post. E o "Veja também" também pode ser substituído por outra frase, se você preferir.
• 7-Agora vamos personalizar todo esse código! Vá em:  ]]></b:skin>  abaixo dele coloque o código abaixo:

<style type='text/css'>
#related-posts{
float:left;
width:auto;
 margin-left: 15px}
#related-posts h2{
background: none
}
#related-posts .related_img {
    margin: 5px;
    width: 155px;
    height: 155px;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -webkit-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
    -moz-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
    border-radius: 360px; /*tirar essa linha se quiser quadrado*/
}
#related-title {
    color: #000; /*cor da font*/
    text-align: center; /*alinhamento do texto*/
    padding: 70px 10px; /*posição do texto junto com o background*/
    font-size: 12px; /*tamanho da font*/
    width: 150px; /*largura do background*/
    height: 40px; /*altura do background*/
    font-weight: bold; /*espessura da font*/
    position: absolute;
    margin-left: 5px;
    background-color: rgba(255, 255, 255, 0.76); /*cor do fundo*/
    border-radius: 360px; /*tirar essa linha se quiser quadrado*/
    margin-top: -180px;
    transition-duration: .4s;
    opacity: 0;
}
#related-title:hover {opacity: 1}
#related-posts .related_img:hover{
opacity:.7;
filter:alpha(opacity=70);
-moz-opacity:.7;
-khtml-opacity:.7
}
</style>

• 8-Espero que vocês tenham gostado! ❤
• 9-Inspiração: Blog, Blog