Colocando postagens relacionados ao final das postagens rápido e fácil de instalar

Olá galera! hoje venho trazer um tutorial de muita utilidade ao blog. Estou falando de POSTAGENS RELACIONADAS à qual os navegantes são redirecionados ao determinado assunto que acabara de ler nos seus posts facilitando a interação mais fácil com seu blog / site. Isso também lhes fará ficar mais tempo navegando no seu blog e lendo mais artigos do assunto a qual lhe convém. etc e tal.

Mas antes de começarmos peço-lhe que faça o BACKUP DO SEU BLOG. 
Agora sim vamos a parte mais legal deste tutorial:

COMO COLOCAR POSTAGENS RELACIONADAS AO FINAL DE SUAS POSTAGENS

Para começar acesse a aba Modelo de seu blog, onde vai instalar as postagens relacionadas para blog.
Clique na aba Editar HTML e dentro da caixa do código fonte dê um Ctrl+F.
Vai expandir uma barra de pesquisa.
Nessa barra de busca digite </head> e tecle Enter para localizar.
ACIMA dessa tag de fechamento cole o CÓDIGO DAS POSTAGENS RELACIONADAS PARA BLOG e salve.

Este código é inovador pois ele não requer que o script seja hospedado externamente para funcionar. O script foi alojado direto no código-fonte do blog e isso impede que um dia saia do ar por excesso de tráfego no servidor ou se o site de hospedagem cair, por exemplo.

Caso queira modificar cores, tamanho das miniaturas ou fontes é tudo nesse código.
Precisa, claro, ter um conhecimento básico em edição de CSS.
Caso não altere nada o resultado será exatamente como na minha imagem demonstrativa.

<!--Postagens relacionadas para blog-->
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>
<style type='text/css'>
#related-posts{
float:left;
width:auto;margin-left: 24px;}
#related-posts a{
border-right: 0px dotted #eaeaea;}
#related-posts h4{
margin-top: 10px;
background:none;
font:17px Montserrat;
padding:3px;
color:#000;
text-transform:none;
text-align: center !important;}
#related-posts .related_img {
margin:10px;
border:2px solid #f2f2f2;
object-fit: cover;
width:140px;
height:130px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }
#related-title {
color:#222;
text-align:center;
text-transform:none;
padding: 0px 5px 10px;
font-size:13px;
width:150px;
height: 40px;}
</style>
<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.gform_foot.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/AVvXsEgWmFLsYviJGGsCryrYY3MPoRNFXvbJAscQdRZuBZbLUHicMVu1JybfAJPgKTw88Fp12V2FqPkiQgmjTr9-W6hVz0QQp1PSAsdJg7yClCDnTd_BEA7doHCbNERcTz6m6CpAVvuAfo2zvr5P/s1600/no-thumbnail.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('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+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>
<!--Final do script das Postagens Relacionadas-->

Feita essa parte vamos ao passo final!
Localize, usando a barra de pesquisa do código-fonte, este trecho:

<div class='post-footer-line post-footer-line-3'>

Provavelmente seu blog apresentará 2 ocorrências dessa tag, estamos em busca da segunda ocorrência, ok?

Também pode ser que seu template não tenha post-footer-line-3. Nesse caso localize <div class='post-footer-line post-footer-line-2'>, ambos servem.
Achou a linha que queremos? Segunda ocorrência, não esqueça!

Cole o CÓDIGO HTML abaixo bem abaixo do código acima e salve.
À esta altura seus posts relacionados já devem aparecer no blog.
Caso não apareça releia o tutorial e confira os passos.

<!-- Postagens relacionadas para blog - Início do código HTML-->
<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=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
  var relatedpoststitle=&quot; Fique mais um pouco! Veja também:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!-- Postagens relacionadas para blog - Final do código HTML-->

A principio é só isso mesmo espero que esteja dado tudo certo com você. Até a próxima bloggers!