Colocando Posts Relacionados no blog

Oii gente! Hoje o blog completou 20.000 visitas pouco dias depois de completar 5 meses de existência <3 e eu quero agradecer a todos os que o acompanham. Saibam que estou com muitos projetos em mente e quero levar o De Cara com a Juh para outras conquistas, mas...

Vamos falar do agora. Nossa, quanto blá blá blá eu faço antes de um simples tutorial.

O tutorial que estou passando hoje é de um código para posts relacionados. Sabe quando você abre um post pra ler e logo no final dele aparecem miniaturas de posts com a mesma temática? Isso acontece porque o tal código seleciona posts marcados com a mesta tag do post que você está lendo para aparecerem e chamarem a atenção do leitor. Ele é muito importante para fazer com que seus leitores naveguem no seu blog por mais tempo e diminua a taxa de rejeição do seu blog.

O código que eu trouxe tem esse resultado:

Agora, vamos aos códigos!

1. Vamos adicionar o CSS do código no CSS do seu blog. Vá em Modelo > Editar HTML, tecle Ctrl+F e procure por ]]></b:skin>.

Acima dessa parte coloque o seguinte código:

<!-- CSS POSTS RELACIONADOS WWW.DECARACOMAJUH.COM --> #related-posts img  { width: 180px!important; /*--tamanho da largura da miniatura--*/ height: 120px!important; /*--tamanho da altura da miniatura--*/ } #related-posts a  { width: 180px!important; /*--tamanho da largura da miniatura--*/ } #related-posts h2 { color: #333; /*--cor da fonte do título Posts Relacionados--*/ font-family: georgia; /*--fonte do título--*/ font-style: italic; /*--apague esta parte para que o texto não apareça em itálico ou personalize do jeito que você quiser--*/ font-size: 24px; /*--tamanho da fonte--*/ line-height: 30px; /*--altura da linha--*/ padding-bottom: 20px; /*--demais códigos são margens e espaçamento, altere se precisar--*/ font-weight: 400; margin-top: 40px; margin-bottom: -10px; margin-left: 5px; padding-top: 30px; } #related-posts { border-bottom: 1px solid #000; /*--linha que aparece abaixo das miniaturas,separando do resto da página--*/ width: 600px; /*--tamanho da linha--*/ float: left; } <!-- FIM CSS POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->

No código você encontra indicações do que você pode personalizar.

2. Procure por  </head> e logo acima coloque este código:

<!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM --> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpwxQlYOC1yXCgxwEQWx0h0Pn7iJ9HRFtUDt4aOvqghzGCedqJ0nhkF7jIEyKfTbuT7kT76k5d3R14aPsoePyVmWKTsIOWcnmEiNXtQN6qOZta0KM1rBxFaNrvRMbhyDrrQZYjuPvWyKc/s1600/no_image.jpg&quot;; var maxresults=3; var splittercolor=&quot;#fff&quot;; var relatedpoststitle=&quot;Posts Relacionados:&quot;; </script> <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/AVvXsEhDpwxQlYOC1yXCgxwEQWx0h0Pn7iJ9HRFtUDt4aOvqghzGCedqJ0nhkF7jIEyKfTbuT7kT76k5d3R14aPsoePyVmWKTsIOWcnmEiNXtQN6qOZta0KM1rBxFaNrvRMbhyDrrQZYjuPvWyKc/s1600/no_image.jpg";} } 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="#DDDDDD"; 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:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="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> <!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->

Onde estiver escrito var maxresults=3 é a indicação de quantas miniaturas aparecerão. Mude o número "3" para o número de miniaturas que desejar.

Onde estiver escrito Posts Relacionados: você pode apagar e substituir por outra frase que goste, como "Leia também" e etc.

3. Procure por post-footer-line post-footer-line-1. 

O código <div class='post-footer-line post-footer-line-1'> aparece duas vezes. Abaixo do SEGUNDO código você adiciona este código: 

<!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->

<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></b:if>

<!-- POSTS RELACIONADOS WWW.DECARACOMAJUH.COM -->

Em vermelho: Se você quer que as miniaturas de posts relacionados apareçam na página inicial e não apenas quando clicam no link de um post, apague todos os códigos que estão em vermelho.

Espero ter ajudado e façam bom proveito! :D