Como inserir Postagens Relacionadas em miniaturas no Blog

quinta-feira, agosto 22, 2013

Olá amores, o tutorial de hoje é um dos mais pedidos. Vocês já devem ter visto as postagens relacionadas com miniaturas abaixo de todos os posts aqui no blog. Os leitores são tentados a visitar as postagens relacionadas quando apresentadas em miniaturas atraentes abaixo de cada post.
Quer aprender como inserir no seu blog? Então vem comigo!

Mostrar os links para posts relacionados juntamente com a miniatura do post correspondente, irá ajudá-lo a aumentar o número de visitas por leitor.
  • Em "Painel do Blogger" navegue até Modelo -> Editar HTML.
  • Aperte "Ctrl + F" e procure por:
</head>
  • E substitua por:
<!—Postagens relacionadas em miniaturas – By CamilaSousa.com.br Início-->
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color: #fff;
}
#related-posts a:hover {
background-color: #DB4B83; }
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Postagens Relacionadas";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- Postagens relacionadas em miniaturas – By CamilaSousa.com.br Fim-->
</head>
  • Em seguida encontre:
<div class='post-footer-line post-footer-line-1'>
  • Se não encontrar, procure por:
<p class='post-footer-line post-footer-line-1'>
  • Agora, imediatamente após qualquer uma dessas linhas coloque este código:
<!-- Postagens relacionadas em miniaturas – By CamilaSousa.com.br  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/summary/-/&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'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>

<!-- Postagens relacionadas em miniaturas – By CamilaSousa.com.br Fim-->
  • Salve! 
  • Você pode ajustar o número máximo de posts relacionados que está sendo exibido pela edição desta linha no código.
max-results=5
  • Para editar o título do widget você pode mudar essa linha no código
var relatedpoststitle="Postagens Relacionadas";
Gostaram do tutorial?
Qualquer dúvida deixe seu comentário, beijos e até o próximo post.

Postagem mais recente Postagem mais antiga

Você também vai gostar

37 comentários

  1. Que tutorial bom, acho que vou fazer no meu blog, deve ajudar bastante para novos leitores! Flor, vc mudou o layout ? por que eu amei esse!!
    Beijos

    http://imaginebelleblog.blogspot.com.br/
    https://www.facebook.com/blogimaginebelle

    ResponderExcluir
    Respostas
    1. Obrigada Babi, mudei sim abuso muito rápido rsrs
      Faz o tuto, se tiver dúvida estarei aqui.
      Beijos

      Excluir
  2. Muito boa a dica. Vou salvar aqui pra tentar fazer depois no meu rs
    Beijo

    Leidi Sampaio
    Encantada por Esmaltes

    ResponderExcluir
    Respostas
    1. Obrigada flor! Qualquer dúvida estarei aqui :D

      Excluir
  3. Camila, AMEI o tutorial... Só uma coisinha, rs, você algum dia poderia fazer o tutorial de como por um ''link'' do blog? Ex o seu: ME LEVE COM VOCÊ? Se sim, agradeço MUITO!
    Beijos

    ResponderExcluir
  4. Ameeeei!

    Att Fernanda,
    fernandamacenablog.blogspot.com.br

    Confira as lojinhas abaixo e aproveita o cupom de desconto:
    savannestore.loja2.com.br - CHARMEDEMENINA 5% de desconto.
    mime-se.loja2.com.br - FERNANDAMACENA 5% de desconto.
    lojameninadepalavra.iluria.com - FERNANDAMACENA 5% de desconto.

    ResponderExcluir
  5. Onde fica a opção de Expandir modelos de widgets?? Não achei =/

    ResponderExcluir
    Respostas
    1. Não existe mais essa opção, pode procurar direto.

      Excluir
  6. Estou adorando todos os tutoriais, parabéns.

    ResponderExcluir
  7. Camila, me ajuda...ha,ha... tô pra ficar piradinha, flor, não consigo de jeito nenhum. sera que não seria modelo + editar html ao invés de layout?
    Não acho a opção expandir html, tem como dá uma conferida no blogger, ele mudou pode ser isso. bjs

    ResponderExcluir
    Respostas
    1. É sim flor, obrigada consertei a postagem!
      Não existe mais essa opção no novo modelo do blogger, faz a procura direto.
      Qualquer dúvida grita!

      Excluir
  8. Olá, me ajudou bastante, obrigada. http://velhofinal.blogspot.com/

    ResponderExcluir
  9. Amei, pena que não funcionou :(, tem outro método

    ResponderExcluir
    Respostas
    1. Relate como vc fez, todo mundo conseguiu fazer.

      Excluir
    2. É preciso refazer estes dois tracinhos desta parte:

      DEIXAR ASSIM, que funciona.
      E ir testando o [div class='post-footer-line post-footer-line], usar todos até dar certo.
      Para mim, testei e funcionou no segundo [div class='post-footer-line post-footer-line-2'>]
      Obrigada, Camila.

      Excluir
  10. Não consigo colocar no meu blog, aparece: Erro ao analisar XML, linha 1604, coluna 3: The content of elements must consist of well-formed character data or markup.
    Me ajuda?
    www.aperfeccionista.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Tente os passos novamente com muita atenção, uma letra ou sinal a mais no código html pode não funcionar.

      Excluir
  11. Amei A Dica e Amei O Seu Blog fiz No Meu e gostei Bastante :)

    ResponderExcluir
  12. não consigo, colocar de jeito nenhum!

    ResponderExcluir
  13. Não consigo...


    www.garotacalculista.com

    ResponderExcluir
  14. Olá faz uma semana que estou mudando template do blogger, sozinha porém o modelo do meu é travel consegui colocar quase tudo que queria mas o posts relacionados nao aparecem, ja virei linha por linha do html e nada de achar o post-footer-line, fiz um blog de testes e no modelo basico ele aparece! nem o link whithin nem similares dão certo, você pode me ajudar? Por favor ja tive outros templates e o link whithin funcionava o que será que esta dando errado, eu aguardo muito sua resposta, espero que me ajude, beijos agradeço desde já beijos

    ResponderExcluir
  15. Oi, tentei, mas apareceu essa mensagem..
    Erro ao analisar XML, linha 671, coluna 4: The markup in the document following the root element must be well-formed.

    ResponderExcluir
  16. muito Bom único código que deu certo no meu blog http://ghzfilmes.blogspot.com.br/2014/06/homens-em-conflito-dvdrip-xvid-dual.html

    ResponderExcluir
  17. amei o tutorial mais eu não estou conseguindo colocar :(
    http://pequenaecomplicada.blogspot.com.br/

    ResponderExcluir
  18. fiz todo passo a passo . mais não entrou ..'

    ResponderExcluir
  19. Obrigada tava procurando um tuto assim!!!
    Beijos

    ResponderExcluir
  20. Não consegui :'(
    Acho que o blogger deve ter feito algumas atualizações desde que o tutorial foi postado, então o código não quer funcionar mais. :'(

    ResponderExcluir
  21. Oi no meu blog falo tudo certinho salvo mais não aparece vc sabe me dizer porque?

    ResponderExcluir
  22. Oii, fiz tudo direitinho mas não apareceu, aí fui retirar os códigos e agora não salva, afirmando que ''Declaração de variável inválido na página: Este atributo não é reconhecido como parte da definição da variável. Entrada: min'' Sabe o que pode ser?

    ResponderExcluir
  23. Não está funcionando no meu blog

    ResponderExcluir

Não deixe de comentar!
Sua opinião é muito importante para mim :D
Beijos...

Rolando no Blog!

Post em destaque ♡

Caixotes de feira na decoração

Se tem uma coisa que adoro fazer, é arte! <3 Me amarro em decoração, principalmente quando se trata de transformar lixo em artigos su...

Mais lidos da Semana