Artigos relacionados com imagens

Manter o leitor interessado no Blog é uma das tarefas mais importantes para um blog de sucesso, com os artigos relacionados seu leitor poderá encontrar o que procurava ou se interessar por um novo conteúdo que existe em seu Blog, sendo assim ele irá visitar mais paginas e ficara por mais tempo no Blog, vamos aprender como inserir esta função que irá manter seu leitor interessado de maneira inteligente.


Colocando artigos relacionados com imagens

1. Vá até "Layout" > "Editar Html" e marque a opção "Expandir modelos de widgets" e procure pela linha "</head>" e acima dela adicione o código abaixo:
<!--Artigos Relacionados Estilo e Script Inicio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Artigos Relacionados Estilo e Script Final-->

As partes em negrito representam a cor que os textos terão, caso queira alterar substitua pelo nome da cor que deseja, ex: "white"



2. Agora procure por "<div class='post-footer-line post-footer-line-1'>" se não encontrar procure: "<p class='post-footer-line post-footer-line-1'>" imediatamente antes disto, adicione o código abaixo:

<!--Codigo Artigos Relacionados Inicio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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="Artigos Relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!--Codigo Artigos Relacionados Final-->

Onde está indicado em vermelho pode ser alterado pelo numero de artigos relacionados que você quer que apareça.

Onde está indicado em azul pode ser alterado pelo titulo que você deseja, ex: Leia Também.

3. Salve o modelo e veja o resultado.

Conheça também a função de artigos relacionados sem imagem:

24 comentários:

  1. eu uso essa ferramenta, muito útil seu blog, salvei nos meus favoritos!

    ResponderExcluir
  2. eu também uso esta ferramenta... e adoro!
    Útil e inteligente, como vc bem disse

    ResponderExcluir
  3. Cara, bacana sua dica, to pensando aqui se coloco no meu...

    ResponderExcluir
  4. Só pra registrar o comentário através da comunidade do Orkut...

    Gostei dá idéia de relacionar artigos com imagens, vou ver se ele se encaixa no template do meu blog e já retorno pra falar se deu certo.. valeu...

    ResponderExcluir
  5. vo tenta isso agora
    volto p/ fala se deu certo^^

    ResponderExcluir
  6. Fiz e deu certo, coloquei para aparecer 6 mas não rolou, vou testar pros outros artigos...

    Quando eu não coloco o Jump de "Continue Lendo"ai não aparece nada no final do post, mas quando tem esse jump ai ao clicar para ler o post completo aparece no final os artigos relacionados...

    Valeu...

    dá uma olhada lá como ficou ..se puder vote no meu blog no premio Top Blog.

    http:www.colunasdehercules.blogspot.com

    ResponderExcluir
  7. vou tentar fazer agora, espero que funcione!!
    :) volto pra contar!
    xeru

    ResponderExcluir
  8. AÊ! Era o que eu precisava!
    Aqui é bom à beça!

    ResponderExcluir
  9. puxa!! nao deu nada!!! o que será?? achei os códigos certos e inseri como disse o tutorial mas nada mudou!! nem com 5 nem 4 nem 3 nem 3 nem nada!!! help-me please??

    ResponderExcluir
  10. funcionou mas o texto está preto como o layout do blog, nao dá pra ler nada!!! e agora?? pode me ajudar a mudar a cor da letra??

    ResponderExcluir
  11. Esther
    encontre no primeiro código as linhas:
    color: black;

    e substitua "black" por "white"

    espero ajudar!

    ResponderExcluir
  12. tow vendo que seu blog eh muito bon pra quen estah começando un blog e ateh mesmo pra quen quer dar una mudada no que jah ten

    ResponderExcluir
  13. gosto muito desse blog !
    muito interessante .

    ResponderExcluir
  14. Cara gostaria muita da dica de uma parecido com o seu, que dê pra colar ícones socias e anucios, por favor me ajuda, usa uma mais não tá dando mais certo.. ABraços

    ResponderExcluir
  15. em breve criarei uma postagem então, fique de olho

    ResponderExcluir
  16. Muito interessante. Eu estou usando o linkwithin. Mais vou testar colocar o código direto no fonte,

    Um abraço
    Adriano Luz

    ResponderExcluir
  17. Boa tarde,,

    Cara não encontrei o trecho que vc falou não encontrei, será que no meu pode ser um outro codigo?

    ResponderExcluir
  18. Pow, no meu não deu apareceu isso aqui: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup. o que dever ser?

    ResponderExcluir
  19. Bom DIa, nao consigo encontrar nenhum dos dois codigos para prosseguir... porque? Obg =)

    ResponderExcluir
  20. No meu blog nao esta funcionando, nao sei mais o que faço, pois nem o LinkWithid também quer funcionar.... afff

    ResponderExcluir

Todos os direitos reservados © Soluções Blog - Desenvolvido por Gustavo Solbas. Tecnologia do Blogger.