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:
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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle=" LEIA TAMBÉM ";
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.
