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 ▼.

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 Modelo → Editar HTML
Se não souber como fazer:

»Leia:Como Acessar o Editor de HTML do Blog e Ativar o Search

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: 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:

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