Como colocar “Posts Relacionados” no seu blog

Estava com essa duvida hoje e resolvi aproveitar minha pesquisa e fazer esse post, eu estava querendo colocar aqueles links em baixo de casa matéria do blog com algumas outras matérias ”relacionadas”, se resume a dois códigos que você deve colocar no seu HTML, por isso não farei o vídeo, apenas escrito mesmo.

1° Vá em “Design” no seu blog e clique em “Editar HTML”, aperte “CTRL+F” e procure por: </head>

2° Cole este código antes da linha </head>

<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: 15px;font-weight: bold;color: #000;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{height: 150px;color: #000;border: 1px solid #ccc;background: #efefef;}#related-posts a:hover {background-color:#d4eaf2;} </style><script type='text/javascript'>//<![CDATA[//Script by Aneesh of www.bloggerplugins.org//Released on August 19th August 2009var 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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDIBGUM7qJdx-sjCU1CM7QqmhCneHoRFNCOsTPSFOi8OOMUnd5MYZ9xwdsoio0_W2gU0cWGUdxOmqPA_w5T9-W8wkMtmbkDyMaBIzflx1i1XhVv-DA24vRkYqJOs0EyNBvgEWi9Bm5jk/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() {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);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="width: 114px;text-decoration:none;padding:5px;float:left;text-align: left;margin: 0px;');if(i!=0) document.write('"');else document.write('"');document.write(' href="' + relatedUrls[r] + '"><img style="width:92px;height:92px;border: 0px;margin: 3px auto 0px;padding: 1px;" src="'+thumburl[r]+'"/><br/><div style="width:100px;padding-left:4px;text-align:center;height:auto;border: 0pt none ; margin: 3px 0pt 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: 1.1em; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) {r++;} else {r = 0;}i++;}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length);}//]]></script>

3° Clique em “SALVAR MODELO” depois selecione “Expandir modelos widgets”

4° “CTRL + F” e procure por: <div class='post-footer-line post-footer-line-1'

5° Cole o seguinte código depois desta linha:

<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><b:if cond='data:blog.pageType == &quot;item&quot;'><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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;var maxresults=5;var relatedpoststitle=&quot;Artigos relacionados&quot;;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div style='clear:both'/></b:if>

6° Você pode alterar a quantidade de matérias que irão aparecer mudando o valor em: var maxresults=5;

7° Basta clicar em “SALVAR MODELO” e está pronto.

É isso, espero que tenham gostado, qualquer duvida deixe seu comentário, até a próxima.