Como Listar Posts Aleatoriamente no Blogger com AJAX

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!