Como colocar Postagens Relacionadas no Blog
Konnichiwa fadinhas & elfos! Como estão? Hoje venho com esse tutorial super útil e necessário! É sempre bom ter postagens relacionadas no final das postagens, assim, o leitor pode acabar se interessando por mais postagens do seu blog! Além disso o modelo que vou disponibilizar é super meigo. Let's Go!?
Avisos: - Como já sempre falo, por precaução faça um backup do seu template, se acontecer algum erro você poderá voltar ao seu anterior
- As postagens relacionadas são organizadas de acordo com os marcadores que estão nas suas postagens, então é necessário que você tenha marcadores. Se aparecer apenas 1, significa que não há outras postagens com o mesmo marcador daquela postagem em questão.
- As postagens relacionadas desse tutorial não ficam na parte inicial e sim no final da postagem aberta
- Só pode ser visto se seu blog estar em visualização pública.
Agora vamos lá!
Primeiramente pesquise por <head> e ABAIXO cole o seguinte código: <script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>
<script src='http://yourjavascript.com/52931313061/postsrelacionados.js' type='text/javascript'/>
Agora vamos colocar o modelo dele pesquise por ]]></b:skin> e ACIMA cole o seguinte código: /* Posts Relacionados
-----------------------------------------------*/
#related-posts {
float: center;
text-transform: none;
height: 100%;
min-height: 100%;
padding-left: 15px;
margin-top: -10px;
}
#related-posts h2 {
font-size: 20px;
font-weight: bold;
color: #c6c6c6;
font-family: Sofia, cursive;
margin-bottom: 20px;
padding-left: 45px;
}
#related-posts a {
color: #000;
}
#related-posts a:hover {
color: #FFFFFF;
background: #E0F2F7;
}
#related-posts img{
margin: auto;
}
#imagem {
width: 125px;
height: 125px;
border-radius: 1000px; /*Retire essa linha se quiser as imagens quadradas*/
}
#texto {
width: 125px;
text-align: center;
color: #c6c6c6;
padding-left: 3px;
height: 65px;
margin: 3px 0px 0px;
padding: 0px;
font-size: 14px;
line-height: normal;
}
Você pode alterar o tamanho, a cor e entre outros elementos no código acima
Obs: Se pelo b:skin não funcionar, pesquise por <style> e cole abaixo dele.
Agora temos que escolher que lugar ele irá ficar, como cada template tem sua nomenclatura, alguns podem ser diferentes, terá que pesquisar por alguns dos elementos de ''post-footer-line'', os códigos que se refere ao final da postagem são esses abaixo, procure por algum deles:Linha 2: <div class='post-footer-line post-footer-line-2'>
Linha 3: <div class='post-footer-line post-footer-line-3'>
Se todos funcionam, você pode decidir onde ele irá ficar, no 1 , logo apos a postagem, 2 apos a postagem mas entre o meio, e 3 no ultimo elemento da linha.
Achou? Cole o código logo abaixo:
<!-- Posts Relacionados -->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Leia também:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- Posts Relacionados -->
Obs: Se existirem duas linhas iguais no template, cole esse código abaixo das duas ok?
Prontinho! Salve, veja como ficou e se necessário faça as alterações onde mencionei lá encima.
Espero que tenha gostado, qualquer duvida só perguntar nos comentários.
Créditos: 
;
;
Ah! E agora o layout free também tem! Confira lá (Layout Pink Flowers)
Até a próxima! Kissus!
Facebook | Twitter | We heart It | Bloglovin
