Como Exibir Posts Relacionados no Blogger

O Blogger ainda não tem a opção de exibir os posts relacionados ao final do texto, para facilitar a vida do leitor e aumentar o tempo de permanência dele no blog.

Mas existe uma forma de se conseguir isso. Achei no blog Htmhelen e agora trago para vocês:

Este script é um tanto quanto complicado, por isso peço que use um blog de teste para não fazer besteira. Para visualizar o resultado crie neste blog de testes pelo menos cinco posts fictícios usando a mesma tag/marcador/label.

Continue Lendo...

1. Clique em Layout, Editar HTML. Cole o seguinte código antes da tag </head>: Onde está escrito 5 você pode substituir pelo número de posts relacionados que você deseja mostrar.

   <script type="text/javascript">
   //<![CDATA[
   var relatedTitles = new Array();
   var relatedTitlesNum = 0;
   var relatedUrls = new Array();
   function related_results_labels(json) {
   for (var i = 0; i < json.feed.entry.length; i++) {
   var entry = json.feed.entry[i];
   relatedTitles[relatedTitlesNum] = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
   }
   }
   }
   }
   function removeRelatedDuplicates() {
   var tmp = new Array(0);
   var tmp2 = new Array(0);
   for(var i = 0; i < relatedUrls.length; i++) {
   if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
   }
   }
   relatedTitles = tmp2;
   relatedUrls = tmp;
   }
   function contains(a, e) {
   for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
   return false;
   }
   function printRelatedLabels() {
   var r = Math.floor((relatedTitles.length - 1) * Math.random());
   var i = 0;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 5) {
   document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
   if (r < relatedTitles.length - 1) {
   r++;
   } else {
   r = 0;
   }
   i++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>

2. Salve. Clique em Expandir modelos de widgets. Procure o seguinte código:

   <b:if cond='data:post.labels'>
   <data:postLabelsLabel/>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
   </b:loop>
   </b:if>

3. Substitua pelo código abaixo: A parte em destaque é o que será realmente acrescentado.

   <b:if cond='data:post.labels'>
   <data:postLabelsLabel/>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
   <b:if cond='data:blog.pageType == "item"'>
   <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
   </b:if>
   </b:loop>
   </b:if>

   
   
4. Salve. Procure (ainda em modo expandido) o código que pode ser:

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

   
   ou
   

   <p class='post-footer-line post-footer-line-3' />

5. Substitua por:

   <div class='post-footer-line post-footer-line-3'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.url != data:blog.homepageUrl'><h4>Leia também:</h4></b:if> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </b:if>
   </div>

   
   

   Se você não encontrar nenhum p ou div que use class='post-footer-line post-footer-line-3', crie-a logo abaixo da tag que fecha class='post-footer-line post-footer-line-2'. Onde está escrito Leia também você pode escrever o texto de sua preferência.