Paginación Infinita en Blogger (Scroll Infinito Fácil)

¿Cansado de ver el botón de "Entradas antiguas" en tu blog de Blogger? Hoy te enseño paso a paso cómo implementar paginación infinita (scroll infinito) en Blogger para que tus lectores sigan viendo tus publicaciones sin tener que dar clic. Ideal si quieres mejorar la experiencia del usuario y el tiempo de permanencia en tu blog. ¡Vamos allá! 🚀

Características

He desarrollado un sistema de paginación que se integra perfectamente con Blogger y no consume en cuanto a la carga del sitio web.

• Compatible con búsquedas: Funciona en resultados de búsqueda de Blogger.
• Flexible en cantidad: funciona con cualquier número de entradas por página.

Ventajas de usar paginación infinita en Blogger

.blog-pager { display: none; }

  
<script>
  document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
    const loadMoreBtn = document.getElementById(&#39;load-more-btn&#39;);
    const postContainer = document.querySelector(&#39;.articles_list&#39;);
    let nextPageUrl = getNextPageUrl();

    if (!nextPageUrl) {
      loadMoreBtn.style.display = &#39;none&#39;;
    }

    loadMoreBtn.addEventListener(&#39;click&#39;, () =&gt; {
      if (!nextPageUrl) return;

      fetch(nextPageUrl)
        .then(response =&gt; response.text())
        .then(html =&gt; {
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, &#39;text/html&#39;);

          const newPosts = doc.querySelectorAll(&#39;.article_card&#39;);
          newPosts.forEach(post =&gt; postContainer.appendChild(post));

          const newNextLink = doc.querySelector(&#39;.blog-pager .blog-pager-older-link&#39;);
          if (newNextLink) {
            nextPageUrl = newNextLink.href;
          } else {
            nextPageUrl = null;
            loadMoreBtn.style.display = &#39;none&#39;;
          }
        });
    });

    function getNextPageUrl() {
      const nextLink = document.querySelector(&#39;.blog-pager .blog-pager-older-link&#39;);
      return nextLink ? nextLink.href : null;
    }
  });
</script>

Asegúrate de tener las clases correctas

La paginación utiliza los botones nativos de Blogger. Además, los números de la paginación son enlaces directos a las páginas reales de tu blog.