20 setembro 2016

Postagem relacionada com efeito hover no post do blog

postagem relacionada

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

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é?! 

25 comentários:

  1. Muito útil, Ale! Irá ajudar muuuuita gente! *-*

    Beijão, mariasabetudo

    ResponderExcluir
  2. Oi minha flor
    ótima dica isso é muito útil para as blogueiras
    principalmente pra as iniciantes
    bjs

    MarilisDutra
    |http://marilisdasilvadutra.blogspot.com.br/|

    ResponderExcluir
    Respostas
    1. É uma dica boa, adoro blogs que tem essa "postagem relacionada", espero que ajude muita gente mesmo :)

      Excluir
  3. Uma dica bem útil. Bjus!

    galerafashion.com

    ResponderExcluir
  4. Amei demais as dicas, acho tão importante e é bem complexo pra quem não esta acostumado então esse tutorial está perfeito.

    obrigada por compartilhar.

    beijos.

    www.chuvanojardim.com.br

    ResponderExcluir
    Respostas
    1. Fico feliz tenha gostado :) Realmente pra quem não está acostumado é um pouco complicado, mas é só ler o tutorial direitinho que aprende ráidinho

      Excluir
  5. nossa super dica, porem acho dificil usar essa liguagem
    http://www.michelineramalho.com.br/

    ResponderExcluir
    Respostas
    1. No começo pode parecer difícil mesmo, mas aos poucos vai acostumando

      Excluir
  6. Adorei suas dicas
    Beijinhos
    CantinhoDaSofia /Facebook /Intagram
    Tem post novos todos os dias

    ResponderExcluir
  7. Otimo tutorial. Adorei as dicas. Bjs

    www.deboradahl.com

    ResponderExcluir
  8. Que maravilhoso, não sabia disso. Amei
    Beijos, Jardim de primavera

    ResponderExcluir
  9. Seu blog é lindo de mais <3 Estou apaixonada
    Charme-se

    ResponderExcluir
  10. Dica mt útil. O meu já tem, mas se não tivesse, iria fazer já1

    Beijos/Xoxo.

    Anete Oliveira
    Blog Coisitas e Coisinhas
    Fan Page Coisitas e Coisinhas
    Instagram

    ResponderExcluir
  11. O único que me funcionou aqui, muito obrigado. Tudo de bom! :)

    ResponderExcluir
  12. Finalmente um tutorial que funcionou!! Muito obrigada!

    www.eduardasantana.com

    ResponderExcluir
  13. 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!!!

    ResponderExcluir
  14. Consegui fazer duas vezes [um em cada blog meu!] e ficou muito bom. Parabéns! Suas instruções ficaram excelentes.

    ResponderExcluir
    Respostas
    1. Ah que bom! Me manda o link do seu blog para que eu possa visitar! Muito obrigada pelo seu comentário <3

      Excluir
  15. Oi! Eu fiz tudo certinho, mas a mim nao me aparece nada :(

    ResponderExcluir
    Respostas
    1. Me 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