Dicas para Blogger 24 - Como colocar posts relacionados no Blogger

Olá e bem-vindo a mais uma parte da série de matérias onde nós damos dicas para blogueiros iniciantes e profissionais de maneira rápida e simples. Hoje nós vamos falar sobre posts relacionados, afinal, desde a morte do Linkwithin e dezenas de outros serviços vários blogueiros ficaram perdidos sem saber o que fazer para remediar a situação. Mas hoje você vai aprender como colocar esses posts relacionados no seu blogger de maneira fácil e gratuita.

Antes de mais nada...

... tenha certeza de que você já não está usando um sistema de posts relacionados antes de tentar colocar outro sistema em seu blog, se você já tiver um, o novo sistema simplesmente não vai funcionar.

E saiba que seguindo esse tutorial o seu gadget vai ficar igual ao nosso, mas tudo bem, como cada site é diferente vamos te ensinar a customizar ele também.

Colocando posts relacionados no Blogger

Para começar vá até o menu do seu Blog, depois clique em "Tema", e em seguida em "Editar HTML". Agora você tem de achar o código </head> do seu blog no meio do código HTML. Quando você achar ele, você vai colar o código a seguir diretamente acima dele.

<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:25px Montserrat;

padding:3px;

color:#29aae1;

text-transform:none;

text-align: center !important;}

#related-posts .related_img {

margin:10px;

border:2px solid #f2f2f2;

object-fit: cover;

width:140px;

height:140px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px; }

#related-title {

color:#000030;

text-align:center;

text-transform:none;

padding: 0px 5px 10px;

font-size:16px;

width:150px;

height: 100px;}

</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/AVvXsEjzNI4Y2xQaL22ECylD1hqd-LUDzhppPXE0f3XCpy2GunMxDnKxnDhUfEO6XBBoLdv0RtCqRUp2LEfxeIeOfJdwCvt-g7dZU17U3T-9o0GxapswKY1jJTXjDIXfu0_6d8JwPzomlBf2yi-n/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>90)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,90)+"...";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>

Colou o código? Muito bem, agora você vai de novo no seu código HTML e vai achar o código <div class='post-footer-line post-footer-line-3'>, ou caso seu blog não tenha essa linha você vai procurar por <div class='post-footer-line post-footer-line-2'>. Abaixo dessa linha você irá colar o código a seguir.

<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=50&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=8;

  var relatedpoststitle=&quot; Mais Matérias Para Você:&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div class='clear'/>

</b:if>

E pronto! Seu site agora tem uma seção de posts relacionados que não precisam de um site de terceiros para funcionar. Mas talvez você não tenha gostado de como ele ficou em seu blog, então é hora de customizar ele. Basta você seguir nossas instruções à risca, tudo bem?

Customizando as postagens relacionadas

Agora vamos te ensinar passo-a-passo como customizar esse gadget para ele ficar no estilo do seu site. Primeiro de tudo, se você não quiser que as postagens apareçam só na página do post, caso prefira que elas apareçam na página principal do blogger, você vai substituir o segundo código por esse aqui, que não tem a primeira e última linha do meu código:

<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=50&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=8;

  var relatedpoststitle=&quot; Mais Matérias Para Você:&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div class='clear'/>

Agora vamos falar o que cada linha dos códigos faz e como você pode mudar elas para se adequar ao seu gosto, ok? Vamos lá!

No primeiro código (o maior deles) temos as linhas:

"font:25px"

Esse é o tamanho da fonte (letras), se quiser aumentar elas ou diminuir basta substituir o número 25 por um maior ou menor.

"color:#29aae1;"

Essa é a cor do seu título, substitua os números e letras depois do símbolo # para mudar a cor para a que você desejar.

"width:140px;

height:140px;"

Isso é a largura e a altura respectivamente de seus gadget, mude o número para um maior ou menor para diminuir ou aumentar os posts relacionados.

"color:#000030;"

É a cor das letras dos seus títulos, escolha a que você quiser e substitua os números para mudá-la.

"font-size:16px;

width:150px;

height: 100px;}"

Isso é o tamanho da fonte, a largura e a altura dela, mais uma vez substitua os números para deixar seu gadget maior ou menor dependendo da sua preferência é claro.

No segundo código nós temos as linhas:

"<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=50&quot;' "

Aqui você pode escolher quais posts você quer mostrar, com o número 50 no código você mostra tanto posts antigos quanto os mais novos, se você quiser mostrar só os mais novos, substitua esse número por 10, 20 ou qual você quiser.

"var relatedpoststitle=&quot; Mais Matérias Para Você:&quot;;"  

Nesse aqui você pode substituir o "Mais Matérias Para Você" pelo que você quiser que seja o título de suas postagens relacionadas.

"var maxresults=8;"

Isso é a quantidade de posts que você quer mostrar no seu site, substitua o 8 pelo número que desejar.

E pronto! Claro, tem mais coisas para customizar, mas essas são as principais e as mais fáceis. Vale também lembrar que esse gadget só mostra postagens relacionadas, ou seja, da mesma categoria, tags ou marcadores que a postagem principal.

Agora nós vamos ficando por aqui, esperamos que essa matéria tenha te ajudado nem que seja um pouco. Se você gostou dela espero que pelo menos curta nossa página no facebook ou deixe um comentário. Ou se preferir, nós mande um e-mail. Obrigado e até a próxima.