Posts relacionados com miniaturas no Blogger


Relacione assuntos de interesse do seu leitor e aumente suas visualizações. (imagem: harold.lloyd)

Conteúdo relacionado é sempre bem vindo. É interessante para o leitor, que pode aprofundar sua leitura com facilidade e principalmente para o blogueiro. Pois mantém o leitor por mais tempo no seu site, promovendo um aumento no número das visualizações de páginas.

Você já deve ter visto em diversos blogs o widget de artigos relacionados com miniaturas das imagens dos posts, precedido pela frase (mal e porcamente) traduzida: Você também pode gostar de...

Admito que o widget fornecido pelo site LinkWithin é interessante, pois é muito fácil de instalar. Alguns cliques e está pronto, mas por outro lado tem alguns problemas.

Ele usa um script próprio, hospedado em seus servidores, para gerar os posts relacionados, que caso saia do ar ou tenha qualquer instabilidade, pode comprometer tanto a aparência como a performance do seu blog. Além de permitir poucas personalizações.

Até pouco tempo atrás esta era a única opção, mas o Blogger Plugins dispobilizou uma solução para exibir os artigos relacionados com imagens em miniatura no rodapé dos posts via JavaScript, que permite uma customização mais abrangente.

Acompanhe a seguir o tutorial mostrando como este recurso foi instalado aqui no UsuárioCompulsivo. Mas não esqueça de fazer um backup completo do seu template antes de começar. Vamos lá:


Artigos relacionados com miniaturas no Blogger

Posts relacionados no Blogger
Relacione conteúdos similares e mantenha seu leitor na sua página por mais tempo.

Através do Painel de Controle do Blogger, acesse na aba Layout a opção Editar HTML e marque a caixa de checagem Expandir modelos de widgets.

Localize no seu template o seguinte trecho de código:
]]></b:skin>
</head>
Substitua tudo pelo seguinte código, que já contém as definições de formatação CSS e o JavaScript dos artigos relacionados e que ficará embutido no template, sem a necessidade de hospedagem externa:
#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, “Times New Roman”, 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;}
]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png'; }
if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 44)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs() { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</div>'); }
//]]>
</script>
</head>
Agora, no trecho de código do seu template equivalente ao rodapé dos post, localize uma das seguintes linhas indicadas abaixo, pelo menos uma delas deve estar presente no seu template:
<div class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-1'>
Logo abaixo desta linha, você deve colar o seguinte trecho de código:
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="POSTS RELACIONADOS";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
Nos trechos destacados em vermelho, personalize a quantidade de itens e o título a ser exibido no cabeçalho dos artigos relacionados, respectivamente.

Visualize para testar e se não ocorrer nenhum erro salve e está pronto. Mas você não conseguirá observar as alterações até que acesse uma postagem individualmente através do seu permalink.

Para personalizar o tamanho das miniaturas, a altura dos itens, cores e demais elementos visuais dos artigos relacionados você precisará editar diretamente as definições CSS e o JavaScript incluídos anteriormente. Mas tenha cuidado para não fazer m...

E antes que eu me esqueça:
Chuuuupa Wordpress!!!

Comentários

  1. Muito bom, já estou instalando no meu blogue! :)

    ResponderExcluir
  2. Extremamente interessante esse meio de divulgar o blog, estava a algum tempo, procurando por esse Widget. Mas ele bate de frente com meu template, pois voce pede para substituir o código, e entre esse código que voce deseja substituir, estao os ícones do blog e diversas outras coisas, importantes.

    Tentei colocar junto, em vez de substituir, acho que nao deu muito certo. Teria um novo codigo, so pra colocar, ao inves de substituir?

    E gostaria de saber, se voce ja teve um notebook com teclado US, pois agora que comprei o meu, os acentos, ao digitar, estao todos ferrados, os que eu consegui aqui, foi pelo corretor de texto. Me encontre pelo meu twitter, ou e-mail, estao no meu blog, claro, se puder ajudar.

    Mas desde ja obrigado. Os seus posts estao seguindo um bom padrao, mas continuam bons.

    Abraco!

    ResponderExcluir
  3. sempre inovando, por issoq amo este blog.
    tava kerendo me sair do linkin within mesmo.
    foi legal instalá-lo mas ele tá kerendo dar
    tchu-tchu agora, affz.
    valeu!

    ResponderExcluir
  4. sóq achoq o no meu blog ñ dá pra fazer pq é um template baixado pela net,desses personalizados q a galera faz.
    eu achei skin script type text java script
    CDATA mas o resto do códigoq vem é todo diferente doq tem no seu post. achoq tereiq continuar com Linkin Within mesmo, é a treva ¬¬

    ResponderExcluir
  5. Não tenho backgrounds no meu Blogue, apenas o template original do Blogger.com mas não deu resultado nenhum! Será que não percebi ou a coisa não está bem explicada? Localizei este trecho de código (b:skin - /head) mas desde onde até onde se apaga para introduzir o script Java? Penso que é aqui que se encontra o problema e se puder esclarecer, agradeço.

    ResponderExcluir
  6. Agora fiquei na dúvida....
    tenho o LinkWithin instalado e como você mesmo disse, aquela
    frase "Você também pode gostar de..." é abrasileirada meia nas coxas.....
    Vou fazer o teste...achei bem interessante....

    ResponderExcluir
  7. ooo parceiro, no meo nao deu certo nao, nao sei pq ;O
    fiz tudo certinhu e igualzinhu tah no seu ;/
    da uma revisada aew vlw

    ResponderExcluir
  8. No meu, que é baseado no Minima, não funcionou. Mas já fiz tantas modificações nele em relação ao original que talvez algum outro script esteja conflitando com esse. Vou experimentar num blog de teste.

    ResponderExcluir
  9. Já está funcionando em meu blog.

    é muito bom pois facilita a navegação para o leitor.

    ResponderExcluir
  10. Grande Compulsivo. Quanto tempo não recebia minha newslleter com dicas sobre customização do blogger. Voltando as suas raízes com tutorias blogspot/blogger e mostrando pra galera que não é preciso gastar dinheiro ou mudar para wordpress pra se ter um blog decente. Parabéns! Uma sugestão/pedido: Estou bolado aqui por não conseguir mudar aquele icone do blogger nos comentários dos usuários do blogger que não tem imagem no perfil. Aquilo é horrível e totalmente desproporcional as imagens dos outros usuários com foto. Me ajuda aê pô!!!

    ResponderExcluir
  11. ai compulsivo, no meu template não existe esse linha, apenas footer-line-3 não tem 2 e nem 1, como faço ? =/

    ResponderExcluir
  12. Tava correndo atrás desse tutorial e não econtrava. Obrigado Compulsivo!

    ResponderExcluir
  13. Bom dia, e quem já tem os "artigos relacionados" antigos sem as miniaturas que nós pudemos encontrar aqui mesmo no compulsivo, o procedimento é o mesmo????

    ResponderExcluir
  14. @marvinoliveiras, você pode usar os dois juntos se quiser, sem problemas (eu acho)...

    []'s
    Compulsivo

    ResponderExcluir
  15. Olá Compulsivo!
    Não sei porque faço tudo corretamente,encontro os codigos corretos e substituo e não aparece nada..
    Atenc.
    Rafael

    ResponderExcluir
  16. Tenho o rodapé com artigos relacionados (http://usuariocompulsivo.blogspot.com/2008/08/como-personalizar-o-rodape-dos-posts.html) e ao tentar colocar esse sistema sem tirar aquele, continua aparecendo somente o primeiro. Pelo menos não está dando erro na hora de salvar, nenhum conflito...

    ResponderExcluir
  17. Boa dica!

    Eu usei um widget desses há algum tempo, mas a página demorava muito pra carregar e eu desisti. Com javascript com certeza não vai demorar tanto assim.

    []'s

    ResponderExcluir
  18. Muito bom, meu blog tem um pequeno bug depois que eu resolver vou instalar

    ResponderExcluir
  19. No meu não está aparecendo nada! :/

    ResponderExcluir
  20. Compulsivo, tentei em diversos blogs meus, de testes e um novo que criei só para testar e não funciona. E é uma configuração bem simples, já instalei recursos bem mais complexos através de tutoriais do seu blog. Tem que tirar o LinkWithin antes? Há algum outro código faltando, por acaso? Não consigo mesmo!

    ResponderExcluir
  21. @EuSóQueriaUmCafé, este tutorial mostra a forma como este recurso foi instalado aqui no UsuárioCompulsivo, portanto tenho certeza que funciona, afinal está funcionando aqui. Se preferir você pode tirar suas dúvidas diretamente na página do desenvolvedor...

    []'s
    Compulsivo

    ResponderExcluir
  22. ::: Infelizmente, no meu também não funcionou...

    ResponderExcluir
  23. Eu tentei fazer este hack para tirar o do LinkWithin mais não sei porque não funciona!?
    Fiz tudo corretamente e olha que praticamente todos os hacks que você passa aqui eu consigo fazer,vou tentar de novo..
    Abraço!

    ResponderExcluir
  24. Seu blog está muito bom compulsiv. Acho que isso facilita a navegação e também melhora a imagem do blog valeu.

    ResponderExcluir
  25. Realmente é uma ótima postagem, pena que pro meu template os códigos não se atracaram. :S
    mas mesmo assim, obrigado pela dica!

    ResponderExcluir
  26. Olá, Compulsivo!
    Infelizmente este foi o primeiro tutorial do Usuário Compulsivo que não deu certo no meu blog. Tentei algumas vezes, inclusive retomando o modelo original do template, sem todas as alterações que eu fiz nele, mas não teve jeito. Pra não dizer que não aconteceu nada, os links para "AS POSTAGENS RELACIONADAS" desapareceram. Só isso!

    Eduardo E S Prado

    ResponderExcluir
  27. @Compulsivo,

    quando posto um vídeo (YouTube) sem fotos, tem jeito de mostrar uma partinha do vídeo ???

    ResponderExcluir
  28. @Breno, acho que não...

    []'s
    Compulsivo

    ResponderExcluir
  29. No meu tambémnão foi, seria por conta de outros códigos que tenho abaixo de ]]> ? Eu usei um código para ter a caixa de comentários abaixo das postagens.

    ResponderExcluir
  30. Olá Compulsivo! Eu novamente.
    Postei um comentário aqui dizendo que o seu widget "Posts Relacionados com Thumbs" não funcionou no meu blog.
    Mas segui link do Blogger Plugins que você postou no artigo e fiz a instalação como é descrita lá e então funcionou.
    Mas uma vez, obrigado pela dica. Aliás, sempre venho aqui buscar algumas.
    Até mais!

    ResponderExcluir
  31. depois de algum tempo encontrei tempo para remover a widget de posts relacionados antiga e inserir essa, só que ela teima em não aparecer, fiz tudo certinho e não apresenta erros. Só que como disse ela não aparece nem mesmo o Título "posts relacionados" aparece. Você tem alguma novidade?

    ResponderExcluir
  32. bastante interessante este artigo e bem mais simples que em outros blogs que complicam os scripts que as veazes sao simples.
    Por isso que o UsuarioCompulsivo tem atingido realmente o seu publico-alvo.

    Eu, como construtor de templates para sites, tenho uma vasta lista de blogs que, dizem ser de ajuda para o blogueiro iniciante quando na verdade o proprio autor do blog e iniciante.

    Outros falam de scripts que nao conhecem e nao podem ajudar os iniciantes que dizem que o script nao funcionou.

    O UsuarioCompulsivo esta de parabens.

    Os leitores desculpem-me pela falta de acentuacao nas palavras, pois nao acessei de casa e sim de uma lan-house.

    ResponderExcluir
  33. Isso dai não ta dando certo não aparece nada

    ResponderExcluir
  34. Eu tambem ja tentei mais num apareceu nada'
    ja tentei até pelos dicas blogger mais não consegui!

    ResponderExcluir
  35. Not working. Eu tentei de tudo...
    Pedo Quevedo diz: "No ecxist" estas duas linhas.

    ResponderExcluir
  36. Consegui! Bom ao iniciantes de blogspot que lêem por cima os post e não repararam o "EXPANDIR MODELOS DE WIDGETS" releiam... kkk vlw!

    ResponderExcluir
  37. amei seu blog, sou virgem de blogger e pra fazer o meu estou apanhando no bumbum pra valer ...pra não dizer outra coisa

    vlw pela pica... ops, dica...

    ResponderExcluir
  38. Esse que você postou aqui não deu certo, já o do blog original de onde você tirou funcionou :-)

    ResponderExcluir
  39. fiz as alterações só que na hora de visualizar as miniaturas não aparecem além de aparecer em formato de lista e não na horizontal. O que eu faço?

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio