Colocando um widget de postagens relacionadas na Blogger

O Wordpress ou outras plataformas mais já têm estes recursos de posts relacionados prontinhos. Já o Blogger não tem essa opção. No entanto, já existe uma forma de implantar essa funcionalidade no novo Blogger, desenvolvida por um dos melhores hackers do Blogger – Blogspot. Antes que você pergunte, não, eu não conheço nenhuma forma de implantar “Posts Relacionados” no Blogger Clássico.

Preste muita atenção pois, você irá mexer com o código do seu blog. Este tutorial inclui a criação de um widget que vai exibir a lista. Essa não é uma opção muito prática, visto que não é possível inserir o widget no corpo dos posts. Mas não se preocupe; eu consegui melhorar o hack, para que a lista seja exibida no final do post, antes dos comentários como em qualquer outra plataforma de blog.

AGORA VAMOS APRENDER COMO IMPLANTAR ESTE RECURSO AO NOVO BLOGGER

1 – Mas antes de começar recomendo que você faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog

2 – Vá ate Tema depois em Editar HTML dê um clique dentro da caixa de códigos e depois Ctrl=F e vai abrir a barra de pesquisa e nela procure a tag </head> e cole o seguinte código abaixo logo acima dela:


  <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 < 20) {
  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>

3 – Salve o template.

4 – Vá a barra de pesquisa novamente e procure pelo trecho de código abaixo (certifique-se de que é esse trecho exato, existem outros parecidos):

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

5 – Cole este código abaixo ANTES do </b:loop> :

<b:if cond='data:blog.pageType == "item"'>

  <script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
  type='text/javascript'/>

  </b:if>

6 – O código deve ficar assim (a parte vermelha é o que você adicionou):

<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&callback=related_results_labels&max-results=10"'
  type='text/javascript'/>

  </b:if>
   </b:loop>
  </b:if>

7 – Salve o template. Se você quer adicionar o widget de Posts Recentes no final da página de postagem, você precisa…

Permitir a Adição de Elementos às Postagens no Blog

Vá ate Tema depois em Editar HTML dê um clique dentro da caixa de códigos e depois Ctrl=F e vai abrir a barra de pesquisa e nela procure a tag </head> e cole o seguinte código abaixo logo acima dela:
Procure pelo código dos Posts; ele deve estar logo após o Header-wrapper. O código é este (ou alguma coisa muito parecida):

<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>
  </b:section>
  </div>

Simplesmente substitua “no“ por “yes“. Salve as mudanças.

Pronto é só isso e já esta feita a adição de elementos às postagens no blog, fácil né?

Agora podemos continuar com o tutorial de Postagens Relacionadas.

Como Criar o Widget de Posts Recentes

1 – Vá até a “Layout”.

2 – Você verá que agora existe um link “Adicionar um gadget“, sobre o campo dos posts. Clique nesse link.

3 – Escolha “HTML/JavaScript”

4 – Escolha um Título – “Posts Relacionados”, “Veja Também”, o que você quiser – e cole código abaixo no campo do Conteúdo:

<script type="text/javascript">
  removeRelatedDuplicates();
  printRelatedLabels();
  </script>

5 – Salve as alterações. Volte para a tab “Editar HTML”.

6 – Procure o código do widget que você acaba de adicionar. Uma forma fácil de encontrá-lo e procurar o título que você deu ao widget, e certificar-se de que ele está dentro de uma tag <b:widget>. É algo assim:

<b:widget id='HTML13' locked='false' title='Posts
  Relacionados' type='HTML'>
  <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
  <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <data:content/>
  </div>
  <b:include name='quickedit'/>
  </b:includable>
  </b:widget>

7 – Inclua as linhas em vermelho, EXTAMENTE ONDE ESTÁ INDICADO.

<b:widget id='HTML13' locked='false' title='Posts
  Relacionados' type='HTML'>
  <b:includable id='main'>
  <b:if cond='data:blog.pageType == "item"'>
   <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
  <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <data:content/>
  </div> 
  <b:include name='quickedit'/>
  </b:if>
  </b:includable>
  </b:widget>

8 – Salve o template. Você já pode arrastar seu widget de Posts Recentes para onde queira; o lugar mais aconselhável é debaixo das “Postagens do Blog”. A lista só vai aparecer nas páginas de postagem – não na Home do blog.

Fonte do Hack: Purple Moggy