Como exibir posts relacionados no Blogger

Nível: avançado

Infelizmente 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.

Desde o dia 11 de agosto estou usando neste blog um script legal que faz isso com precisão baseado nos marcadores que os posts têm em comum.

Eu até encontrei algumas traduções desse recurso, mas assim como ocorreu com o formulário de comentários embutido no post, só funcionou no meu blog depois que eu fui à fonte e traduzi por minha conta.

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.

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. Salve.

Tradução do tutorial do PurpleMoggy's Blog aproveitando idéias do tutorial do Blosque.com.