Artigos relacionados para blogger.


Finalmente aprendi a colocar os artigos relacionados no blogger e resolvi ensinar, acredito que muita gente igual a mim procura, e acaba encontrando tutoriais que são complicados demais para entender. Se você ainda não sabe do que eu estou falando, olha ai o exemplo: 

As postagens ficam relacionados pelos marcadores (tags), mostrando outros artigos com as mesmas tags, e que o leitor, pode se interessar e ler a postagens. 

Antes de qualquer alteração em seu layout, salve o código em um bloco de notas, caso aconteça algum erro. 

Bem, vamos ao códigos. Basta ir em modelo > edit HTML e clique em "expandir modelos de widgets" aperte 'ctrl+f ' e procure por </head> e logo antes dessa linha coloque este código.

<!--Artigos Relacionados Estilo e Script Inicio -->
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 12px; color: #a9a9a9;font-family: Georgia; margin-bottom: 10px; margin-top: 10px;}
#related-posts a{color: #a9a9a9;}
#related-posts a:hover{color: #c6bd5e;}
#related-posts a:hover {background-color:#e1e1e1;}
#related-posts img{margin: auto;}
</style>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!--Artigos Relacionados Estilo e Script Final-->

Feito isso, procure por:

<div class='post-footer-line post-footer-line-1'> 

caso não encontre tente,

<p class='post-footer-line post-footer-line-1'>

 Encontrando, cole ANTES da linha este código:

<!--Codigo Artigos Relacionados Inicio-->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Você também pode gostar&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!--Codigo Artigos Relacionados Final-->

var maxresults=5; este ' 5 ' indica a quantidade de postagens que ira aparecer. Você pode modificar, já que em cada blog cabem quantidades diferentes de artigos.

Em  #related-posts, você pode modificar a cor dos links, cor do background dos artigos, deixando de acordo com as cores do seu blog.

Salve e veja o resultado. Lembre-se, só funciona com o uso dos marcadores. 

É isso, qualquer dúvida ou questionamento deixe nos comentários, beijos!


Comente pelo Facebook

68 comentários:

  1. Adorei linda, SÓ QUE NÃO ESTÁ APARECENDO :(
    Eu queria saber também um seguinte: Eu coloquei o seu layout free , no meu blog só que na postagem aparece as letras brancas, já tentei mudar na cor do post , mais o azul é diferente, então queria colocar a parte da postagem em azul, como faço isso ? Obrigada flor!
    apenasprincesinha.blogspot.com

    ResponderExcluir
    Respostas
    1. Para a parecer você precisa liberar seu blog para todo os leitores :(
      A postagem aparece Branca, talvez porque vc copiou o texto de algum lugar.... melhor escrever, ou refazer mesmo ^^

      Excluir
  2. Ei Bruna... que legal o tutorial! Eu acho tão útil isso... sempre fico à procura de coisas assim para incrementar no meu blog. Vou fazer em breve e te falo o resultado *-* Obrigada... beijos :*

    ResponderExcluir
    Respostas
    1. Oiiii Karine, eu quero ver sim!
      Obrigada.

      Beijos

      Excluir
  3. Ameii , posta mais tutoriais que eu to aqui na espera *-*

    ResponderExcluir
  4. Oie gostei muito , ^^

    Visita o meu blog ... Link : http://tvmodas2.blogspot.com.br/

    ResponderExcluir
  5. Bruna!!! Não sei nem o que dizer... estou a dias procurando um tutorial e já passei por todos esses que se dizem profissionais e nada. O meu linkwithin não estava funcionando nos artigos relacionados na própria postagem, só funcionava na página principal e eu não queria assim. Você, com seu artigo meu salvou, muito obriggado.

    Nossa, to muito feliz, vou tirar o linkwithin que não ta funcionando bem e coloquei o seu. Eu sou casado, mas te daria uma abraço bem forte de agradecimento!!! {} Vlw!!!

    ResponderExcluir
    Respostas
    1. Pouuxa que isso, haha eu que agradeço! :DD

      Abraços!

      Excluir
  6. Não quis funcionar no meu, Bruna! Me ajuda? :(

    ResponderExcluir
  7. Bruna, não funcionou :( uso seu lay free e não foi mesmo :(
    mas obrigada pelo tuto ^^

    ResponderExcluir
    Respostas
    1. Mandy, eu fiz no meu blog e funcionou, você esta errando ou esquecendo alguma coisa :(

      Beijos

      Excluir
  8. Bruna me ajuda Por favor, eu amo esses seus tutoriais de como adicionar coisas ao blog mas nunca consigo adicionar ao meu:(
    Olha só!!
    Não vou mudar nada que é para você poder ver como está!!
    (sim eu fiz tudo que você pediu nesse tutorial!!)
    http://tutoriaisoliveira.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Maria, acredito que você tenha errado alguma coisa!
      Fiz no meu blog e funcionou :(

      Beijos

      Excluir
  9. Bruna eu não achei nenhuma dessas tags, o que eu faço? :(

    ResponderExcluir
  10. no meu tb não pegou, fiz o passo-a-passo e uso marcadores já. :$

    www.oquefaltou.com

    ResponderExcluir
  11. Também tentei inserir no meu e não funcionou. O que será que aconteceu?

    www.caseimeamarrei.blogspot.com

    ResponderExcluir
    Respostas
    1. Descobri o que aconteceu com o meu template! Haviam dois post-footer e inseri nos dois. Apareceram os posts relacionados e o sobre o autor. Quem não estiver conseguindo inserir, dá uma olhada no código do seu template.

      By Stephanie Cristhyne

      www.caseimeamarrei.blogspot.com

      Excluir
    2. Ah, você me salvou, moça! Muito obrigada mesmo!

      Excluir
  12. No meu não funcionou nem inserindo nos dois post-footer. Tenho um problema na data também que nada resolve. =/

    ResponderExcluir
  13. no meu não funciona. Já tentei de tudo, vários tutoriais... acho que deve ter algo bloqueando =(

    www.portaoazul.blogspot.com

    ResponderExcluir
  14. ADOREI! Mas, não apareceu não :/ o que eu faço?

    ResponderExcluir
  15. No meu também só funcionou depois de colocar nos dois 'post-footer'

    Obrigada!

    ResponderExcluir
  16. Este comentário foi removido pelo autor.

    ResponderExcluir
  17. Obg pela dica adorei !! e tb estou usando um layout seu !!
    beijinhos .. obg por tudo ♥
    docegaroota.blogspot.com.br

    ResponderExcluir
  18. Olá, Bruna. tudo bem? Adorei o tutorial, porém gostaria de saber como faço para aumentar o tamanho das imagens e dos títulos dos artigos. Pois eles ficaram pequenos (do tamanho do seu) e para combinar com meu temple gostaria de aumenta-los. como faço? Ah, sou de Recife. heheh beijos

    ResponderExcluir
  19. Melhor tutorial que eu já vi!!! *-*
    Muito muito muito obrigada! :D

    ResponderExcluir
  20. Sempre quis colocar isso no meu blog e finalmente achei um tutorial! Fiz tudo o que pediu mas não apareceu no meu blog, o que eu faço? Bjs <3

    alemdooculos.blogspot.com.br

    ResponderExcluir
  21. Oie... acabei de conhecer o seu blog e amei ♥ o ruim é que não aparece no meu blog :'(

    quando peço para exibir o código não aparece o segundo código que vai abaixo do div class='post-footer'

    o que será que acontece?

    bjs

    ResponderExcluir
  22. o meu deu certo depois que coloquei o segundo código DEPOIS da linha encontrada.
    (:

    Beijos

    ResponderExcluir
  23. Bruna coloquei no meu blog,não deu erro,vou ver se apareceu.
    Obrigada,beijos

    ResponderExcluir
  24. Sabem porque algumas pessoas não conseguem colocar?
    Eu sei porque já usei este widget se usarmos a postagem resumidas no blog,ele só vai aparecer quando a postagem estiver aberta,isto é,clique em leia mais para ver... para aparecer na home tem que modificar os códigos,eu entendo de html só não gosto de escrever sobre o assunto...rsrsrs...,tem pessoas mais competentes para isso.
    Obrigada,Bruna.
    Sucesso para vc,bjs

    ResponderExcluir
  25. Porque o meu nao aparece na pagina principal?

    ResponderExcluir
    Respostas
    1. Porque esse codigo nao foi feito para aparecer na pagina inicial...A autora copiou de outro tutorial e nao sabe esclarecer as duvidas... Tente esse: http://www.mundoblogger.com.br/2009/09/artigos-relacionados-com-imagem-no.html

      Excluir
  26. Bruna responde por favor!! Olha o meu funciona só na página interna...mas na página principal não, olha lá por favor manuelleviana.blogspot.com , pode me dizer o que fazer?

    ResponderExcluir
  27. Eu fiz e deu super certo! Amei!!!
    Já tinha tentado outros, mas ou será mais dificil de fazer, ou não dava certo. Esse foi simples, fofo, e dá pra personalizar de forma facil tbm.

    Obrigada pela dica e parabéns pelo blog.
    http://maio97.blogspot.com.br/

    ResponderExcluir
  28. Oi Bruna, no meu blog não acontece nada, já tentei duas vezes e não consigo. acasaehsua.blogspot.com.br

    ResponderExcluir
  29. Este comentário foi removido pelo autor.

    ResponderExcluir
  30. Meninas, consegui, vai aparecer duas vezes o código: post-footer-line post-footer-line-1

    É só colocar antes do segundo que você encontrar.

    A minha dúvida é: 1- como faço pra centralizar o texto 2- Como faço para aumentar o tamanho das imagens

    ResponderExcluir
  31. Adorei seu tutorial, bem simples e explicadinho. Obrigada <3
    http://www.leticiakoliveira.com/

    ResponderExcluir
  32. Olá Bruna, tudo bem?

    Fiz todos procedimentos iniciais, mas não conseguir encontrar nenhum dos dois códigos que você citou acima.

    E agoraa? Aguardo retorno, um beijo!
    cravomelscrapoficial.blogspot.com

    ResponderExcluir
  33. Amei o tutorial, só tive que caçar muito os códigos, e tem mais de um, colei em uns três lugares o segundo, mas funcionou! *-*
    Só queria saber como faço pra deixar centralizado que nem o seu, pq o meu fica tudo alinhado a direito =\
    lepetitblondie.blogspot.com.br

    ResponderExcluir
  34. Fiz tudo certinho mas não aparece de jeito nenhum! :(

    ResponderExcluir
  35. Adoreeeeeeeei =D
    Me confundi um pouquinho mas agora já sei, tive que colocar em 3 lugares haha ♥

    http://diamante-colorido.blogspot.com.br/

    ResponderExcluir
  36. Fiz tudo certinho, super bem explicado mas não aparece nada, :(

    ResponderExcluir
  37. oii sera que você pode me ajudar nao to conseguindo nao aparece to pirando aqui

    ResponderExcluir
  38. Bruna, eu já era apaixonada pelo seu blog, muita coisa boa aqui, esse texto foi uma mega ajuda. Eu já tive posts relacionados no meu blog, no entanto, quando eu exclui alguns textos eles continuavam aparecendo e aí a pessoa clicava e ia para a página inexistente, desinstalei, reinstalei várias vezes, mas o problema era o mesmo, no entanto, esse seu tutorial mudou tudo, só relaciona com textos existentes, muito obrigada :)
    Beijos.

    Blog da Camila Peixoto

    ResponderExcluir
  39. Você salvou minha alma, flor. Obrigado pelo tutorial

    htpp://ladyblackraven.blogspot.com

    ResponderExcluir
  40. Bru, no meu também não deu certo. Tentei de tudo mas não rolou.

    ResponderExcluir
  41. Bru, no meu não aparece de jeito nenhum. Já troque tudo de lugar, ja coloquei de voltar, já chequei tudo e não funciona. Já até limpei os dados de navegação e.e

    ResponderExcluir
  42. Nao consigo de jeito nenhum, Bru, me ajuda, please!
    Tenho o seu template tb.
    http://vamossersinceras.blogspot.com.br
    Beijos

    ResponderExcluir
  43. Muito bom, funcionou perfeitamente. Obrigada!

    ResponderExcluir
  44. Eu fiz e deu certo. Eu só queria aumentar o tamanho das imagens, já pesquisei e tentei de tudo e ainda não consegui.
    mas vou deixar como está, por enquanto.
    Obrigadão!

    ResponderExcluir
  45. GURIA DEU MUITO CERTO NO MEU BLOG!

    TE AMOOOOOOOOOOOOOOOOOOOOOOOO <3

    ResponderExcluir