Blogger – Como Listar Todos os Seus Posts Aleatoriamente com AJAX
Se você é um blogueiro no Blogger e deseja uma maneira dinâmica e interessante de exibir seus posts, listando-os de forma aleatória, este tutorial completo vai ajudar você a implementar essa funcionalidade usando AJAX.
Por que listar posts aleatoriamente?
Listar posts de forma aleatória permite que seus visitantes descubram conteúdos antigos que poderiam passar despercebidos, aumentando o tempo de permanência e o engajamento no seu blog. Além disso, essa técnica pode ajudar na indexação dos seus posts pelo Google, diversificando as páginas visitadas.
Passo 1: Adicionando o script ao seu site
Para começar, você deve inserir o seguinte código JavaScript no seu Blogger. Esse script busca todos os seus posts através da API do Blogger e os apresenta aleatoriamente na sua página.
- O script faz múltiplas requisições para recuperar todos os posts, até um máximo definido;
- Os posts são armazenados em um array;
- Ao final da consulta, um post é escolhido aleatoriamente e exibido na lista.
Importante: Este código é compatível com o editor do Blogger e segue boas práticas de SEO para garantir boa indexação dos links gerados.
<ul id="postList12"></ul>
<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 && 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 {
// Exibe um post aleatório após carregar todos
var randomIndex = Math.floor(Math.random() * posts.length);
var randomPost = posts[randomIndex];
var elmt = document.getElementById("postList12");
var liElement = document.createElement("li");
var anchorElement = document.createElement("a");
anchorElement.href = randomPost.url;
anchorElement.textContent = randomPost.title;
anchorElement.setAttribute("title", randomPost.title);
anchorElement.setAttribute("rel", "nofollow");
liElement.appendChild(anchorElement);
elmt.appendChild(liElement);
}
}
}
sendQuery12();
</script>
Passo 2: Implementando o script
Após incluir o script acima, ele começará a listar um post aleatório da sua coleção de posts do Blogger. Você pode personalizar a lista para exibir mais posts ou modificar o estilo conforme seu layout.
Este método promove uma experiência diferente para o visitante, permitindo uma navegação mais variada no seu conteúdo e pode ser um diferencial para seu blog.
Exemplo prático do script
Para um uso prático, insira o código acima em um gadget HTML/JavaScript no layout do Blogger ou diretamente no post onde deseja que a lista apareça.
Essa técnica é simples e eficiente, e melhora a interação dos visitantes com seu conteúdo antigo, ajudando também a melhorar a distribuição do tráfego interno do seu blog.
Se precisar de ajuda adicional ou quiser compartilhar suas dúvidas, deixe seu comentário abaixo!
