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