Posts Relacionados com Miniaturas

Existem muitas maneiras de colocarmos os posts relacionados no final dos posts dos nossos blogs.
♦ Podemos colocar somente os links na forma de texto;
♦ Podemos também colocar miniaturas com efeito hover (quando passamos o mouse em cima aparece o título da postagem). Inclusive este é um bom hack para ser ensinado aqui. Logo será!
Mas hoje vou ensinar como colocar os posts relacionados com as miniaturas (thumbnails) e o Título logo abaixo ▼.
Relacionados1
backup do template Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
Leia o tutorial até o fim e tenha certeza de ter entendido.
Entre no seu blog: Vá em ModeloEditar HTML
Se não souber como fazer:

1ª Parte - Coloque o script e estilo dos Posts Relacionados com Miniatura

Encontre a tag </head> e cole este código▼ acima desta tag.
<!--Scripts e Estilo Posts Relacionados com Miniaturas-->
<!-- remove --><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;/*Cor do Título da Gadget dos Posts Relacionados*/
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;/*Fonte do Título dos Posts Relacionados*/ 
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;/*Cor do Título dos Posts Relacionados*/
}
#related-posts a:hover{
color:black;/*Cor do Título dos Posts Relacionados quando passa o mouse em cima*/
background-color:#d4eaf2;/*Cor do Fundo dos Posts Relacionados quando passa o mouse em cima*/
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2U9A2IYDApgR0K3bxy9d7WEJ_4mEWdcRdp0Nk5VIy4lCDOxV29qm9xZAFB28iNpA6HiATUlvwxVd8UjaMVkwP54BzNm4loONeCSo_xp0j-Kit6BXWIdVaPlKFTm6B9DKcqdc_bI6oeio/s400/noimage.png";
var maxresults=5;
var splittercolor="#CCCCCC";
var relatedpoststitle="Posts Relacionados";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Fim Scripts e Estilo Posts Relacionados com Miniaturas-->

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Entendendo o código:

1º - A linha em azul define a imagem da miniatura quando o post não tiver uma imagem nativa.

[var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2U9A2IYDApgR0K3bxy9d7WEJ_4mEWdcRdp0Nk5VIy4lCDOxV29qm9xZAFB28iNpA6HiATUlvwxVd8UjaMVkwP54BzNm4loONeCSo_xp0j-Kit6BXWIdVaPlKFTm6B9DKcqdc_bI6oeio/s400/noimage.png";]

A imagem utilizada neste hack é esta: no_image e está representada pelo URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2U9A2IYDApgR0K3bxy9d7WEJ_4mEWdcRdp0Nk5VIy4lCDOxV29qm9xZAFB28iNpA6HiATUlvwxVd8UjaMVkwP54BzNm4loONeCSo_xp0j-Kit6BXWIdVaPlKFTm6B9DKcqdc_bI6oeio/s400/noimage.png
» Mas você pode usar a imagem que quiser.

Veja estes exemplos de imagens para você colocar no seu hack e ser exibida quando o seu artigo não tiver uma imagem:
gentleface.com free icon setfileclosephotodiagram-23no_image_3sem fotono_image5Deletedetail_no_imageno_image (1)no_imageno_image2no_image3noimagenoimage1no-image5no-photopicture (1)sem_foto1sem_imagemSlides
Estas imagens são apenas modelos que encontrei no google em uma busca rápida.
Sugiro que você crie a sua imagem para dar personalidade ao seu blog.
Se quiser usar alguma imagem destas clique em cima da imagem antes.

2º - Esta linha indica o máximo de posts relacionados que você deseja colocar no final de seu post, neste caso são 5 posts.

[var maxresults=5;]

Isto vai variar de acordo com a largura da coluna dos seus posts.

3º - #CCCCCC – É a cor da linha que separa os posts relacionados.

[var splittercolor="#CCCCCC";]

4º - Determina o título dos posts relacionados no final do post.

Neste caso será “Posts Relacionados”, mas você pode colocar da forma que quiser. Exemplo: “Artigos Relacionados”, “Você pode Gostar dos Artigos”, etc…
[var relatedpoststitle="Posts Relacinados";]

5º - Este é o URL do código javascript.

Você pode baixá-lo e hospedar onde quiser. Veja→ Como Hospedar Javascript no seu Googlecode
[<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>]

OU

Você pode hospedá-lo no seu próprio blog. » Basta substituir esta linha acima por este código ▼:
    <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{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2U9A2IYDApgR0K3bxy9d7WEJ_4mEWdcRdp0Nk5VIy4lCDOxV29qm9xZAFB28iNpA6HiATUlvwxVd8UjaMVkwP54BzNm4loONeCSo_xp0j-Kit6BXWIdVaPlKFTm6B9DKcqdc_bI6oeio/s400/noimage.png"}}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}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(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}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 '+splitbarcolor+';"');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>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
   //]]>
    </script>
A parte interessante disso é que você pode configurar o tamanho da miniatura da imagem do post relacionado e a largura do espaço onde fica o título do post. Fazendo as alterações necessárias no código em verde.

2ª Parte - Colocando o Código dos Posts Relacionados com Miniaturas abaixo do Post

Encontre a linha:
<div class='post-footer-line post-footer-line-1'>
Se você não encontrar esta linha procure por:
<p class='post-footer-line post-footer-line-1'>
Obs: Se você colou o código abaixo da 1ª linha que apareceu no seu blog e os posts relacionados não apareceram, desfaça, procure pela próxima linha igual e refaça este procedimento. Dá certo na maioria das vezes. Este hack funciona para os modelos de templates 2010 do blogger. Veja o Demoplate 2010

Abaixo de uma destas linhas cole o código:
<!--Código Posts Relacionados com Miniaturas-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!--Código Posts Relacionados com Miniaturas-->

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Entendendo o Código

1º Está vendo o código:

max-results=6
Este código está relacionado com a primeira parte dos códigos.

→ Esta linha indica o máximo de posts relacionados que você deseja colocar no final de seu post » Se você quiser colocar 5 posts relacionados no final do post, neste código devera ser sempre um número a mais, ou seja, 6.


2º Os posts relacionados estão configurados para serem exibidos apenas quando abrir o post.

Se você quiser que sejam exibidos na página inicial é só retirar estas 2 linhas dos 2 blocos de códigos acima:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- remove --></b:if>

Fonte: Tradução e Adaptação do Tutorial Related Posts Widget for Blogger with Thumbnails
Posts Relacionados com Miniaturas Posts Relacionados com Miniaturas Reviewed by Aurea on 12/04/2012 Rating: 5

26 comentários:

  1. Ola? aqui tem eu tentei colocar no meu blog, mas e um seguinte, no meu template não deu.. e ele e um template do proprio blogger o simples, sabe mas não deu de jeito nenhum! Tem como vc me ajudar??

    ResponderExcluir
    Respostas
    1. Olá Galera,

      Atualizei o artigo e acho que seu problema será solucionado!

      Excluir
  2. Respostas
    1. Mano,

      Infelizmente não sei se serve. Provavelmente sim com algumas alterações.
      Mas, como não entendo nada de wordpress vou ficar te devendo esta informação.

      Excluir
  3. sinto muiito mas no meu tambem nao pego

    ResponderExcluir
    Respostas
    1. Olá Gusttavo,

      Fiz umas atualizações e se você procurar pela segunda linha de código <div class='post-footer-line post-footer-line-1'> no seu blog e proceder como ensino deverá dar certo.

      Excluir
  4. não cosegui fiz tudo como manda o tutorial mas meu blog não aceitou não ficou nas postagens...ou será que só vai ficar nas novas postagens que eu fizer

    ResponderExcluir
    Respostas
    1. Olá Val,

      Você pode colocar o código dos posts relacionados acima desta tag: <div class="post-share-buttons">...</div>
      Uma vez ativado irá aparecer em todos os posts.
      Sugiro que você tente em mais lugares e em um blog de testes. Instale o template que usa no blog original em um de testes e ative os relacionados nele, então vá colocando em partes onde deseja que apareçam.
      Se tiver mais de uma linha <div class='post-footer-line post-footer-line-1'> coloque os relacionados na segunda e veja se deu certo. Geralmente dá!
      Entrei em seu blog e tive um problema de conflito com o módulo de segurança de um banco que acesso. Ele travou o chrome. Acho que pode ser o rádio que você utiliza. Dê uma olhada nisso, pode perder visitas por isso.
      Um abraço,
      Áurea

      Excluir
  5. Olá! Não dá certo no meu blog, oq fazer? :( Estou louca pra ter posts relacionados no meu blog e nunca dá certo.

    ResponderExcluir
  6. essa caixa de editar o html do blogger mudou e ficou pessima, tem como voltar para a anterior?

    ResponderExcluir
    Respostas
    1. Olá Denisson,

      Achei o contrário sobre o novo editor do blogger! Gostei muito. Você se acostuma e tem a vantagem de conseguir encontrar o que precisa com mais eficiência.
      Leia o artigo aqui do TPV: Como Acessar o Editor de HTML do Blog e Ativar o Search
      Veja como ativar e search que ficará tudo mais fácil.
      Seja bem vindo!

      Excluir
  7. Valeu, deu super certo colocando na segunda div... Obrigada, não suportava mais usar linkwithin ou outbrain.

    ResponderExcluir
  8. Como altero a fonte da descrição dos posts? Não do título do gadget, da descrição abaixo das fotos? abraços.

    ResponderExcluir
    Respostas
    1. Olá Café Brecho,

      Esta descrição é o título do post. Você pode alterá-lo no código em verde do arquivo javascript. Está logo acima da 2ª Parte deste artigo.
      Ficou legal em seu blog! Fui lá para ver!
      Seja sempre bem vinda aqui no TPV.

      Excluir
  9. No meu blog funcionou PERFEITAMENTE!!!
    Até comentei com meu companheiro que o seu tutorial foi o melhor que já vi em toda minha vida. Pois além de mostrar os códigos vc ensina o que cada um deles pode fazer. Muito massa. Parabéns


    Olha como ficou lindo no Mand'ela Alterna: http://www.mandelaalterna.com/

    ResponderExcluir
  10. Com certeza esse foi o melhor tutorial! Parabéns e obrigada por disponibilizar!

    ResponderExcluir
    Respostas
    1. Olá Nathi,
      Fico Feliz por ter dado tudo certo com no seu blog!
      Seja sempre bem vinda ao TPV!

      Excluir
  11. No meu não pegou, tentei nas duas linhas e acima da que vc postou aqui nos comentários. =/

    ResponderExcluir
  12. ótimo post, eu só tive que obrigatoriamente retirar a linha pois estava dando erro ao salvar o template.
    O resto está funcionando muito bem! PARABÉNS!!!

    ResponderExcluir
  13. Olá Aurea! Tudo bem?
    Você poderia nos ensinar a adicionar ao lado deste widget, o banner de adsense 300x250? Ficaria muito legal, se ao invés de ficar disposta somente uma linha horizontal de posts relacionados, ficar 2 linhas com 3 posts ao lado do blogo de adsense.

    Agradeço desde já!
    Ótimo tutorial!

    ResponderExcluir
  14. Infelizmente não consegui!!!
    Vou procurar um blog que ensine outra maneira.
    De qualquer forma, obrigada!!

    ResponderExcluir
  15. Se eu fizer este procedimento pelo CSS dará certo?

    ResponderExcluir
  16. Tem como não deixar a imagem retorcida?
    Eu consegui fazer, mas as imagens ficaram horriveis :/

    ResponderExcluir
  17. Ficou perfeito! Tentei através de muitos sites, mas não dava certo. Por fim encontrei a solução, e essa solução está aqui no seu site, Áurea. Muito obrigado. Veja como ficou: www.diariodocirco.com.br Respeitável público, quero aproveitar e convidá-los para curtir nossa página oficial no facebook: https://www.facebook.com/diariodocirco, a única organização que fala de todos os circos brasileiros. Estamos à disposição para tirar suas dúvidas sobre os circos que visitam sua cidade. Veja também se tem algum circo pertinho de você, confira a agenda de nosso site. Sejam bem vindos!

    ResponderExcluir
  18. gostaria de aumentar o tamanho da imagem, mais não estou encontrando no código?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.