Como colocar Postagens Relacionadas no Blog
fevereiro 18, 2017
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á!
<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'/>
/* 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.
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.

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
9 comentários
Olá! Td bom? ^^
ResponderExcluirNo layout que eu usava antes n tinha isso, dai eu me matei pra tentar colocar com N tutoriais e n consegui #burrona Dai troquei de lay e esse já vem com isso ^^
Mas é bem fácil esse seu tuto, vou salvar aqui, pois se eu trocar de novo e n tiver dai eu tento colocar por meio de seus ensinamentos U.U
bjs
Blog: Skull Minds | Twitter | Tumblr | Pinterest | WeHeartIt | Instagram
Snap: maisaindia
Oláá! Tudo sim !
ExcluirSei bem como é, no meu layout antigo também não pegava, tem um site que coloca no blog e só tinha tutorial com esse e não um que podia fazer diretamente no blog. Esse que ensinei não tem erro! Mas o lay ainda tá lindo Índia ^^ , trocou pro melhor kk Salve sim! Aaah obrigadaa ! Kissus
domo arigatou
ResponderExcluirmim ajudou muito , sou muito grato, meu blog ficou perfeito
e voçe é linda e Fofa
De nada! Fico muito feliz que te ajudou *-*
ExcluirFicou bom mesmo? Que ótimo! <3
Obrigadaa! ^.^
Olá , adorei o tutorial estava procurando um desde que o linkwithin começou a dar defeito , instalei tudo direitinho e ainda não apareceu nada , ele demora ?
ResponderExcluirOláa! Não demora não, ele precisa aparecer na hora mesmo. Ou você já adicionou algo nesses espaços ou você precisa tentar em outros, tem essas 3 opções de linhas onde colocar, tente colocar em outra, certifique-se que você tenha mais de 3 postagens da mesma categoria também
ExcluirLegal
ResponderExcluirhttp://dicashot.blogspot.com/
Ele não funcionou no meu site e nem tem esses dois códigos nele.
ResponderExcluirOlá, este tutorial ainda funciona?
ResponderExcluir