Como adicionar o gadget postagens relacionadas no blogger/blogspot

Fala galera , vou estar ensinando a colocar o gadget de postagens relacionadas no blogger, esse gadget que é um dos mais impostantes e que todo blog deveria ter... Imagina usuários que entram em seu blog e ler uma postagem completa, e depois? Se seu blog não oferecer opções visíveis para as pessoas ao terminar de ler um post encontrar outros que talvez venha o interessar, ele dificilmente vai procurar outros posts por livre e espontânea vontade.

Por esse motivo que esse gadget é tão impostante para seu blog, ele aparecerá no final de casa postagem, com uma miniatura de imagem, e o nome do post.

A plataforma do gadget postagens relacionadas mais usada pelos blogueiros é a do LinkWhitin , mas essa plataforma na minha opinião tem algumas falhas e está muito desatualizada. Uma das falhas é não atualiza as miniaturas de imagens, tipo se você criar um post com determinada miniatura de imagem, depois de publicado se você perceber que a tal imagem não ficou legal e querer muda-la pelo linkwhitin não é possível, mesmo você atualizando seu post com outra imagem no gadget vai continuar a aparecer a imagem antiga. Outra falha é que essa plataforma já tem muito tempo com o mesmo design, velho, ultrapassado...

Por outro lado o gadget que vou fazer o tutorial agora tem um design moderno, se por ventura você achar que uma imagem não ficou legal, você pode editar seu post e mudar a imagem que já vai estar aparecendo a nova imagem no gadget.

Imagem do gadget que irá aprender nesse tutorial:

1. Logue-se no blogger 
2. No Menu clique em "Modelo" 
3. Depois em "Editar HTML" 
4. Clique dentro do HTML 
5. Dê um ctrl+f para pesquisar

Pesquise por

</head>


Copie e cole o código abaixo antes do </head>
<!--Postagens relacionadas inicio--> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 0px dotted #eaeaea;} #related-posts h4{margin-top: 10px;background:none;font:14px Arial;padding:3px;color:#000; text-transform:none;} #related-posts .related_img {margin:5px;border:1px solid #ddd;object-fit: cover;width:140px;height:100px;} #related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:11px;width:136px; height: 40px;margin-bottom:15px;} </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/AVvXsEiC_pJN48G-mc0KLl9osJRQpFL0EzqSi1BDfbLvyyqxBo3DxW-u5QNHyok-wqLps3J7TjSCvTIQElpnvVrEG1ZW6oaz5Hn4oCkOuaZl4ehgGSQh62kWmp1Qt_31CUd-DBnY3EwubeUPl46p/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";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> </b:if> <!--Postagens relacionadas final-->


Obs:
Em #related-posts .related_img { widht, e height representam a largura e altura da imagem, mude o tamanho se for necessário.
Para o gadget apareçer também na pagina inicial apague a segunda linha:<b:if cond='data:blog.pageType ==  "item" ' >      , e a penúltima  </b:if>



Agora procure por <div class='post-footer'> (Se encontrar duas iguais ultilize a segunda)
<div class='post-footer'>



Logo acima de  <div class='post-footer'>  cole esse código:
<!-- Postagens Relacionadas Inicio--> <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> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=4; var relatedpoststitle="<b>Veja Também:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div class='clear'/> <div style='font-size: 9px;float: right; margin: 5px;'> <a href='http://fanaticosdaweb.blogspot.com.br/2016/07/adicionar-o-gadget-postagens-relacionadas-blogger-blogspot.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Posts Relacionados</a></div> </b:if> <!-- Postagens relacionadas Final-->



Obs:
var maxresults=4;   ,representa o número de postagem relacionadas a serem exibidas, ultilize quantas preferir.
var relatedpoststitle="<b>Veja Também:</b>   ,representa a mensagem a ser exibida no gadget, caso queira ultilizar outra mensagem , só é substituir.
Esse gadget localiza as postagens relacionadas através dos marcadores, portando  postagens que não tenha marcadores em comum, só aparecerá ela mesmo nos posts relacionados.


Salve seu modelo, se tudo ocorreu certo você já estará mostrando postagens relacionadas no final de cada post.