Tutorial: Como colocar postagens relacionadas no blog (Leia também)

Olááá! tudo bem com vocês? espero que sim. Hoje eu trouxe mais um tutorial de HTML para ajudar o blog de vocês a ficar mais bonito e completo. São postagens relacionadas no rodapé da postagem. É um tutorial muito procurado, e também é fácil de colocar no blog, só precisa de atenção e cuidado. 

Esse modelo eu usei o código da Elaine Gaspareto como base, então consegui fazer esse modelo da imagem que você pode alterar as cores,tamanho, quantidade, vou explicar como funciona cada parte editável do código.

Resultado: 

É o modelo que usei no layout do blog Polaroids And Lipsticks

A primeira coisa que você tem que fazer é um backup do seu layout atual, caso algo dê errado você não perde seu blog. Se não souber fazer aprenda aqui. 

 Como Instalar as postagens relacionadas no blog? 

1- Vá em modelo >> editar HTML >> clique em alguma parte dentro do código >> tecle ctrl + f. Irá aparecer uma caixinha de pesquisa. Nela cole </head>, tecle enter para localizar. Localizou? ABAIXO dessa tag você coloca o seguinte código. 

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

Salve.

2 -  Novamente na caixinha procure por ]]></b:skin> ou dependendo do seu layout </stlyle> e ACIMA dessa linha você cola o seguinte código.

#related-posts{float: left;
text-align:center;
width: 786px;
display: block;}
#related-posts a{ }
#related-posts a:hover{}
#related-posts h2{background: none;}
#related-posts .related_img {
margin: 0;
padding: 5px;
width: 170px;
height: 170px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
margin-left: 4px;
}
#related-posts h2 {
    margin: 6px 30px 10px;
    padding: 5px 25px 5px 0px;
    width: 700px;
    font: 10 12px/12px 'Karla', sans-serif; /*Fonte*\
    letter-spacing: 4px;
    color: #000; /*Cor da fonte*\
    text-align: center!important;}
#related-title {
        color: #000;
    text-align: center;
    text-transform: uppercase;
    padding: 67px 10px;
    font-size: 12px;
    width: 152px;
    height: 38px;
    position: absolute;
    font-family: 'lato', sans-serif;
    margin-left: 7px;
    background-color: #efd4d4; /*Cor do fundo quando passar o mouse*\
    margin-top: -180px;
    transition-duration: .4s;
    opacity: 0;
}
#related-title:hover {opacity: 1}
#related-posts .related_img:hover{opacity:.7;filter:alpha(opacity=30);-moz-opacity:.7;-khtml-opacity:.7
}

Salve.

3 - O terceiro código você irá colar onde quer que apareça as caixinhas. Eu uso ABAIXO de  <div class='post-footer-line post-footer-line-3'>, mas você pode testar em outras partes do código.

Também pode ser usado abaixo de  <div class='post-footer-line post-footer-line-2'> ou     <div class='post-footer'>

Teste o código abaixo, em uma dessas tags acima e veja qual fica melhor no seu layout. 

<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=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot; LEIA TAMBÉM &quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>

Em vermelho está marcado duas vezes o número 4, que é o número de caixinhas que irá aparecer. Deixe os dois número iguais por exemplo: 3 e 3, 5 e 5 ou pode não funcionar. E também o texto LEIA TAMBÉM que você pode alterar para o que quiser. 

Salve e pronto! suas caixinhas estão instaladas. 

É só isso, é um tutorial fácil, espero que tenham gostado. Até o próximo post 

 Lembrando, eu trabalho fazendo layouts quem precisar ou quiser montar um orçamento é só entrar em contato em alguma das minhas redes sociais. 

Instagram | Fã page | Facebook Pessoal | Portfólio