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

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