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á!
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
10 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?
ResponderExcluirObrigado por ajuda, seu artigo foi muito útil
ResponderExcluir