Quer ter a "postagem relacionada" no seu blog e não sabe como? Hoje trouxe um tutorial que é muito útil em todos os blog e com certeza vai te ajudar muito! 😃
Uma coisa muito útil que pode ter no seu blog é a famosa "postagem relacionada", muitas pessoas chamam como "Leia também", "Related post" ou "Post relacionado", enfim, pode se dar vários nomes para esse negocinho maravilhoso 😍
O que é e para que serve a postagem relacionada?
As vezes você entra em um blog e começa a ler um post e abaixo dele aparece agumas opções de postagem relacionada, certo? Pois então, isso que irei te ensinar a fazer.
Esse script serve para manter o leitor entretido no seu blog, pois quando ele procurar sobre o assunto que deseja irá aparecer outros posts que você escreveu no "postagem relacionadas" sobre esse mesmo assunto e isso fará com que o leitor fique curioso em ler o próximo post e assim ele fica mais tempo no seu blog. Deu pra entender?
TUTORIAL: Como colocar no meu blog?
Para colocar a postagem relacionada no seu blog é muito simples, basta você ir no painel principal do seu blog, clicar em Modelo e em seguida em Editar HTML.
clique na imagem para ampliar
Agora clique em qualquer lugar dentro da caixa de HTML e clique em Ctrl + F e procure por:
</head>
E cole o seguinte código acima de </head>:
<!--Postagens relacionadas-começo-->
<script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/>
<!--Postagens relacionadas-fim-->
Agora você vai procurar no Ctrl + F o seguinte código:
<div class='post-footer-line post-footer-line-3'/>
Lembrando que você pode não encontrar o código acima, caso não encontre procure por:
<div class='post-footer-line post-footer-line-3'>
Neste caso voce terá que colocar o código depois da </div> que fecha esse código.
(Caso não entenda essa parte pergunte nos comentários que te ajudarei )
E abaixo dele você coloca este código:
<!--Código Postagens relacionadas Início-->
<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=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="<b>Veja também:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!--Código Postagens relacionadas Final-->
<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=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="<b>Veja também:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!--Código Postagens relacionadas Final-->
O número 4 em "var maxresults=4;" no código acima pode ser subtituído pelo tanto de miniaturas que você quer que apareça no final do seu post. E o "Veja também" também pode ser substituído por outra frase, se você preferir.
Agora vamos personalizar todo esse código! 😍
Vá em: ]]></b:skin> abaixo dele coloque o código abaixo:
<style type='text/css'>
#related-posts{
float:left;
width:auto;
margin-left: 15px}
#related-posts h2{
background: none
}
#related-posts .related_img {
margin: 5px;
width: 155px;
height: 155px;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-webkit-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
-moz-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
border-radius: 360px; /*tirar essa linha se quiser quadrado*/
}
#related-title {
color: #000; /*cor da font*/
text-align: center; /*alinhamento do texto*/
padding: 70px 10px; /*posição do texto junto com o background*/
font-size: 12px; /*tamanho da font*/
width: 150px; /*largura do background*/
height: 40px; /*altura do background*/
font-weight: bold; /*espessura da font*/
position: absolute;
margin-left: 5px;
background-color: rgba(255, 255, 255, 0.76); /*cor do fundo*/
border-radius: 360px; /*tirar essa linha se quiser quadrado*/
margin-top: -180px;
transition-duration: .4s;
opacity: 0;
}
#related-title:hover {opacity: 1}
#related-posts .related_img:hover{
opacity:.7;
filter:alpha(opacity=70);
-moz-opacity:.7;
-khtml-opacity:.7
}
</style>
#related-posts{
float:left;
width:auto;
margin-left: 15px}
#related-posts h2{
background: none
}
#related-posts .related_img {
margin: 5px;
width: 155px;
height: 155px;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-webkit-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
-moz-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
border-radius: 360px; /*tirar essa linha se quiser quadrado*/
}
#related-title {
color: #000; /*cor da font*/
text-align: center; /*alinhamento do texto*/
padding: 70px 10px; /*posição do texto junto com o background*/
font-size: 12px; /*tamanho da font*/
width: 150px; /*largura do background*/
height: 40px; /*altura do background*/
font-weight: bold; /*espessura da font*/
position: absolute;
margin-left: 5px;
background-color: rgba(255, 255, 255, 0.76); /*cor do fundo*/
border-radius: 360px; /*tirar essa linha se quiser quadrado*/
margin-top: -180px;
transition-duration: .4s;
opacity: 0;
}
#related-title:hover {opacity: 1}
#related-posts .related_img:hover{
opacity:.7;
filter:alpha(opacity=70);
-moz-opacity:.7;
-khtml-opacity:.7
}
</style>
E é isso ai pessoal, agora você tem a postagem relacionada no seu blog! Gostaram do tutorial?
Bom... caso não tenham entendido algo é só perguntar ai nos comentários que eu irei responder e tentar ajudar ❤ Espero que vocês tenham gostado!
Comente aqui o que você deseja aprender a fazer no seu blog, quem sabe eu possa trazer outros tutoriais ensinando né?!
Muito útil, Ale! Irá ajudar muuuuita gente! *-*
ResponderExcluirBeijão, mariasabetudo ❥
Espero que ajude!
ExcluirBeijos 😘
Oi minha flor
ResponderExcluirótima dica isso é muito útil para as blogueiras
principalmente pra as iniciantes
bjs
MarilisDutra
|http://marilisdasilvadutra.blogspot.com.br/|
É uma dica boa, adoro blogs que tem essa "postagem relacionada", espero que ajude muita gente mesmo :)
ExcluirUma dica bem útil. Bjus!
ResponderExcluirgalerafashion.com
Amei demais as dicas, acho tão importante e é bem complexo pra quem não esta acostumado então esse tutorial está perfeito.
ResponderExcluirobrigada por compartilhar.
beijos.
www.chuvanojardim.com.br
Fico feliz tenha gostado :) Realmente pra quem não está acostumado é um pouco complicado, mas é só ler o tutorial direitinho que aprende ráidinho
Excluirnossa super dica, porem acho dificil usar essa liguagem
ResponderExcluirhttp://www.michelineramalho.com.br/
No começo pode parecer difícil mesmo, mas aos poucos vai acostumando
ExcluirQue bom que gostou!
ResponderExcluirAdorei suas dicas
ResponderExcluirBeijinhos
CantinhoDaSofia /Facebook /Intagram
Tem post novos todos os dias
Que bom que gostou :)
ExcluirBeijos ^-^
Otimo tutorial. Adorei as dicas. Bjs
ResponderExcluirwww.deboradahl.com
Bacana ensinar.
ResponderExcluirBjim...
blog Usei Hoje
Instagram | Twitter | Fan Page
Que maravilhoso, não sabia disso. Amei
ResponderExcluirBeijos, Jardim de primavera
Seu blog é lindo de mais <3 Estou apaixonada
ResponderExcluirCharme-se
Obrigada linda ❤
ExcluirDica mt útil. O meu já tem, mas se não tivesse, iria fazer já1
ResponderExcluirBeijos/Xoxo.
Anete Oliveira
Blog Coisitas e Coisinhas
Fan Page Coisitas e Coisinhas
Instagram
O único que me funcionou aqui, muito obrigado. Tudo de bom! :)
ResponderExcluirFinalmente um tutorial que funcionou!! Muito obrigada!
ResponderExcluirwww.eduardasantana.com
Super adorei!!!! Já tinha usado vários modelos, mas o seu é com certeza o melhor e mais detalhado, principalmente pra quem gosta de alterar e deixar o próprio estilo. Parabéns!!!
ResponderExcluirConsegui fazer duas vezes [um em cada blog meu!] e ficou muito bom. Parabéns! Suas instruções ficaram excelentes.
ResponderExcluirAh que bom! Me manda o link do seu blog para que eu possa visitar! Muito obrigada pelo seu comentário <3
ExcluirOi! Eu fiz tudo certinho, mas a mim nao me aparece nada :(
ResponderExcluirMe manda o link do seu blog para que eu possa te ajudar! Fique atento aos sinais do código pois qualquer coisinha fora do lugar pode dar erro no resultado final. Obrigada pela visita <3
Excluir