Blogger Hacks | Conteúdo | Dicas | Melhore Seu Blog | Problogger | Widgets

Widget de Posts Relacionados para Blogger - Blogspot

Update: A solução ideal:

Lista de Posts Relacionados no Rodapé do Post para Novo Blogger - Blogspot

Também leia esse post se você encontrou algum problema na instalação do hack.
________________________________

Como eu mencionei no post de ontem sobre a usabilidade do conteúdo, uma lista de “Posts Relacionados” no rodapé dos posts oferece vários benefícios. Alguns desses benefícios são:

- Permite ao leitor encontrar exatamente o que lhe interessa, sem ter que revirar todo o site;

-É uma excelente “isca” para que o visitante/paraquedista conheça mais o seu blog;

- Aumenta a probabilidade de que o usuário leia mais posts;

- Mantém posts mais antigos à vista;

- Melhora a navegabilidade do blog.

Para quem usa Wordpress ou outras plataformas, é muito fácil oferecer essa lista. Já o nosso querido Blogger não oferece 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.

Como Exibir Uma Lista de Posts Relacionados no novo Blogger - Blogspot

Você vai ter que mexer um pouco com o código do blog. Este hack 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.

Primeiro, Vamos ao Hack

Siga cada passo cuidadosamente, prestando atenção para não inserir espaços ou caracteres desnecessários. Depois de cada passo, visualize o blog para certificar-se de que está tudo certinho, e salve antes de passar ao próximo passo. Assim, será mais fácil saber onde foi que você errou, e poderá voltar atrás sem ter que fazer tudo de novo.

1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

2 - Procure a tag </head>. Cole o seguinte código logo ANTES 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. Clique na caixinha “Expandir modelos de widgets”.

4 - Procure o seguinte trecho de código (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 ANTES do </b:loop> :

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

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&amp;callback=related_results_labels&amp;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

• Permaneça na tab “Editar HTML”:
• NÃO clique em “Expandir modelos de widgets”. Se a caixinha estiver marcada, desmarque.
• 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.

Fim da Adição de Elementos às Postagens no Blog

Agora podemos continuar com o hack de Posts Recentes.

Como Criar o Widget de Posts Recentes

1 - Vá até a tab “Elementos da Página”.

2 - Você verá que agora existe um link “Adicionar um elemento de página“, sobre o campo dos posts. Clique nesse link.

3 - Escolha “HTML/JavaScript”, clicando em “Adicionar Ao Blog”.

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

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

5 - Salve as alterações. Volte para a tab “Editar HTML”. Clique na caixinha “Expandir modelos de widgets”.

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.

O problema do widget é que ele fica depois dos comentários, lá embaixo, na página do post. Se você tiver muitos comentários, é provável que muitos leitores não vejam sua lista de posts relacionados. O melhor mesmo seria uma solução estândar, com a lista de posts relacionados logo abaixo do posts, não é?

Eu descobri como implantar essa solução perfeita. No entanto, você vai ter que me desculpar, mas este post já está muito longo. Amanhã eu ensino o procedimento para que você possa ter uma lista de posts relacionados como essa que você vê aí embaixo.

Fonte do Hack: Purple Moggy

________________________________
Compare Preços de: Artigos Personalizados, Coisas Personalizadas, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

________________________________

Technorati : Blogger, Blogger Hacks, Blogspot, Como Faço, Customizado, Dicas, Melhore seu BLog, Personalizar, Posts Relacionados, Widget

Mais informação:

• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger - Blogspot (46)
• Como Personalizar seu Blogger - Blogspot: Título Clicável no Header (21)
• Como Colocar o Link Count Widget doTechnorati no Blogger - Blogspot (4)
• Widget: Formulário de Contato para Blogger - Blogspot (6)
• Personalize seu Blogger - Blogspot: Widget Customizável para Posts Recentes (24)