Código para Posts Relacionados

10:56

Tutorial Completo: Como Adicionar Posts Relacionados no Blogger (Baseado em Marcadores)

Os posts relacionados são uma excelente estratégia de navegação interna. Eles exibem, ao final de cada artigo do seu blog, links para outras postagens que compartilham os mesmos marcadores (labels). Isso mantém o leitor por mais tempo no seu site, reduz a taxa de rejeição e melhora o SEO do blog.

Neste tutorial, você aprenderá a implementar um sistema funcional de posts relacionados no Blogger (Blogspot) utilizando JavaScript e feeds JSON. O código exibirá até 20 títulos aleatórios (mas que realmente tenham relação com o assunto), sem repetições.

🔧 Antes de começar – Faça o backup do seu modelo!

Sempre que for editar o HTML do Blogger, siga estas etapas de segurança:

Acesse o painel do Blogger.
Vá em Tema → Editar HTML (antes, clique no botão Fazer backup / Restaurar e salve o arquivo .xml no seu computador).
Mantenha esta janela aberta durante o procedimento.

📝 Passo a passo para inserir os posts relacionados

1. Inserir o script principal (biblioteca de funções)

No editor HTML do seu tema, localize a tag de fechamento </head> (use Ctrl + F para encontrá-la rapidamente). Logo antes dela, cole o seguinte bloco de código:

<script type="text/javascript">
//<![CDATA[
// ============================================================
// Script para Posts Relacionados no Blogger (baseado em labels)
// ============================================================

// Arrays que armazenarão os títulos e URLs dos posts relacionados
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

// Função chamada pelo feed JSON do Blogger
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;
      }
    }
  }
}

// Remove possíveis URLs duplicadas (quando dois labels trazem o mesmo post)
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;
}

// Função auxiliar para verificar se um item já existe no array
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}

// Exibe os posts relacionados em formato de lista (<ul>)
// Limite máximo: 20 posts, exibidos em ordem aleatória
function printRelatedLabels() {
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  document.write('<ul class="related-posts-list">');
  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>

Depois de colar, clique em "Salvar tema" (salvamento temporário, não se preocupe).

2. Expandir os widgets do modelo

No mesmo editor HTML, marque a opção "Expandir modelos de widgets" (ao lado do código). Isso é essencial para que possamos localizar trechos específicos do template.

3. Modificar a exibição dos labels no loop

Agora procure pelo bloco de código que mostra os marcadores na postagem. Normalmente ele se parece com isso:

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

Dentro desse bloco, imediatamente antes da tag de fechamento </b:loop>, insira o seguinte código:

<!-- Início do carregamento dos feeds para posts relacionados -->
<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=5"' type='text/javascript'/>
</b:if>
<!-- Fim do carregamento dos feeds -->

💡 Explicação: Esse script é acionado para cada label do post atual. Ele puxa da API do Blogger até 5 posts que também possuem aquele label. Quanto mais labels, mais posts relacionados serão coletados.

Salve o tema novamente.

4. Posicionar a exibição dos posts relacionados

Agora você precisa decidir onde a lista de posts relacionados aparecerá. O local mais comum é logo abaixo do rodapé da postagem, dentro da área post-footer.

Procure pela seguinte linha (pode variar um pouco conforme o tema):

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

Logo após essa linha (ou imediatamente acima da tag de fechamento do rodapé), cole o código abaixo:

<!-- Bloco que exibe os posts relacionados -->
<b:if cond='data:blog.pageType == "item"'>
  <div class='related-posts'>
    <h3>📌 Você também pode gostar destes posts relacionados:</h3>
    <script type='text/javascript'>
      removeRelatedDuplicates();
      printRelatedLabels();
    </script>
  </div>
</b:if>

🔁 O removeRelatedDuplicates() elimina links repetidos (quando dois labels diferentes apontam para o mesmo post).
🎲 O printRelatedLabels() gera uma lista ordenada aleatoriamente com até 20 títulos.

5. Finalizar e testar

Clique em Salvar tema mais uma vez.
Acesse uma postagem qualquer do seu blog (não a página inicial) e role até o final. Você verá a seção de posts relacionados.

🎨 Dica extra – personalizar o estilo com CSS

Para deixar a lista mais bonita, adicione o seguinte código CSS dentro da tag <style> do seu template (ou na área "CSS personalizado"):

.related-posts {
  margin: 30px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-left: 5px solid #2c3e50;
}
.related-posts h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.related-posts-list {
  list-style: none;
  padding-left: 0;
}
.related-posts-list li {
  margin-bottom: 8px;
}
.related-posts-list li a {
  color: #2980b9;
  text-decoration: none;
}
.related-posts-list li a:hover {
  text-decoration: underline;
}

⚠️ Possíveis problemas e soluções

Os posts relacionados não aparecem? Limpe o cache do navegador ou teste em uma janela anônima.
Aparece apenas "Posts Relacionados" sem links? Verifique se seu blog já possui mais de uma postagem com o mesmo marcador. O sistema precisa de pelo menos dois posts compartilhando um label para funcionar.
Erro de JavaScript? Confirme se você colou os códigos exatamente nos locais indicados e se não há conflitos com outros scripts.

✅ Conclusão

Com esse tutorial, você implementou um sistema completo de posts relacionados no Blogger, baseado nos marcadores, com distribuição aleatória, remoção de duplicatas e aparência personalizável. Isso melhora a experiência do usuário, aumenta o tempo de permanência e fortalece sua estratégia de SEO interno.

📌 Keywords:

posts relacionados, Blogger, tutorial passo a passo, código HTML, JavaScript para blogs, marcadores labels, navegação interna, aumentar tempo de permanência, SEO para blogs, blogspot, feed JSON, remover duplicatas, exibição aleatória, personalizar tema Blogger, editar HTML, widget de links, design responsivo, CSS para blog, dicas de usabilidade, engajamento do leitor

🔖 Tags:

#PostsRelacionados #BloggerTutorial #DicasBlogger #HTMLparaBlogs #JavaScriptBlogger #MarcadoresLabels #SEOInterno #NavegacaoNoBlog #PersonalizarTema #BlogspotBrasil #AumentarVisualizacoes #EditarHTML #WidgetBlogger #CSSBlogger #UsuarioEngajado

Reactions