Como Listar Todos os Posts do Seu Blog em Ordem Cronológica

@CanalQb no YouTube

Como Listar Todos os Posts do Seu Blog em Ordem Cronológica

Se você utiliza o Blogger e quer exibir todos os seus posts em ordem cronológica diretamente em uma página do seu site, este tutorial irá guiá-lo passo a passo.

Por que isso é útil?

Organizar e exibir suas postagens por ordem de publicação melhora a navegação, aumenta o tempo de permanência no site e facilita a indexação por mecanismos de busca como o Google e Bing.

Passo 1: Preparar o espaço para a listagem

Primeiro, crie um local em sua página onde os links dos posts serão exibidos. Use a seguinte marcação:

<ul id="postList12"></ul>

Passo 2: Adicionar o script JavaScript

Em seguida, adicione o código abaixo para que os posts sejam carregados automaticamente do feed do Blogger:

<script type="text/javascript">
var startIndex = 1;
var maxResults = 100;
var posts = [];

function sendQuery12() {
  var scpt = document.createElement("script");
  scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
  document.body.appendChild(scpt);
}

function processPostList12(root) {
  var feed = root.feed;
  if (feed.entry.length > 0) {
    for (var i = 0; i < feed.entry.length; i++) {
      var entry = feed.entry[i];
      var title = entry.title.$t;
      for (var j = 0; j < entry.link.length; j++) {
        if (entry.link[j].rel == "alternate") {
          var url = entry.link[j].href;
          if (url && url.length > 0 && title && title.length > 0) {
            posts.push({title: title, url: url});
          }
          break;
        }
      }
    }

    if (feed.entry.length >= maxResults) {
      startIndex += maxResults;
      sendQuery12();
    } else {
      var elmt = document.getElementById("postList12");
      for (var k = 0; k < posts.length; k++) {
        var liElement = document.createElement("li");
        var anchorElement = document.createElement("a");
        anchorElement.href = posts[k].url;
        anchorElement.textContent = posts[k].title;
        liElement.appendChild(anchorElement);
        elmt.appendChild(liElement);
      }
    }
  }
}
sendQuery12();
</script>

Exemplo prático funcionando

Após a inserção do código, todos os posts publicados no seu blog aparecerão em uma lista organizada cronologicamente. O resultado é dinâmico e se atualiza automaticamente conforme novos conteúdos forem postados.

Dicas adicionais

• Você pode aplicar estilos CSS ao elemento <ul> para personalizar a aparência da lista.
• Evite carregar esse script em mais de uma página para não afetar o desempenho.

Vídeo demonstrativo

Se você tiver dúvidas ou sugestões, deixe seu comentário abaixo. O objetivo é sempre facilitar a navegação e melhorar a experiência do usuário no seu blog.

Para mais tutoriais como este, inscreva-se no @CanalQb no YouTube.