Cómo añadir una paginación numérica para Blogger

Si tienes un blog en Blogger con muchas publicaciones, seguramente te has dado cuenta de que la navegación predeterminada con los botones "Entradas antiguas" y "Entradas recientes" no es la mejor opción para mejorar la experiencia del usuario.

En esta guía, aprenderás cómo agregar una paginación numérica profesional a tu blog para que los visitantes puedan navegar fácilmente entre las páginas de tu contenido.

📌 Tutorial: explicación paso a paso

📌 PASO 1: Acceder al Editor de Tema en Blogger

Inicia sesión en tu cuenta de Blogger.
En el panel lateral izquierdo, haz clic en Tema.
Busca la opción Personalizar y selecciona Editar HTML.
Ahora estarás dentro del código fuente de tu plantilla.

📌 PASO 2: Agregar el Código de Paginación

Para que la paginación numérica funcione correctamente, necesitas insertar un código especial dentro de la plantilla.

👉 Ubicación correcta: Antes de la etiqueta de cierre </body>

📌 Sigue estos pasos:

Desplázate hasta el final del código.
Busca la etiqueta </body>.
Justo antes de esa etiqueta, pega el siguiente código:

<!-- Paginación numérica profesional para Blogger -->
<b:if cond='data:blog.pageType == "index"'>
  <script type='text/javascript'>
    //<![CDATA[ 
    /** PAGINACIÓN BLOG YEIFER OROZCO - Copyright © 2025 Yeifer Orozco (Licencia MIT) **/
    var itemsPerPage = 12; 
    var pagesToShow = 5; 
    var prevpage = 'Anterior'; 
    var nextpage = 'Siguiente'; 
    var urlactivepage = location.href; 
    var home_page = "/";
    //]]> 
  </script>
  <script src='https://yeiferorozco.github.io/blog/pages.js' type='text/javascript'></script>
</b:if>
<!-- Paginación -->

📌 PASO 3: Explicación del Código

La siguiente linea de código hace que la paginación solo aparezca en la página principal y en las páginas de categorías.

<b:if cond='data:blog.pageType == "index"'>

Configuración de la paginación:
- itemsPerPage=12; → Muestra 12 entradas por página.
- pagesToShow=5; → Muestra hasta 5 números de página.
- prevpage ='«'; → Define el símbolo "anterior".
- nextpage ='»'; → Define el símbolo "siguiente".
- home_page="/"; → Define la URL principal del blog.

📌 PASO 4: Agregar el Código CSS (estilo) de Paginación

Para que la paginación numérica se vea correctamente, necesitas insertar un código CSS dentro de la plantilla.

👉 Ubicación correcta: Justo antes de la etiqueta de cierre ]]></b:skin>

Busca la etiqueta ]]></b:skin>.
Justo antes de esa etiqueta, pega el siguiente código:

/* CSS Paginación numérica para Blogger - Creado por Yeifer Orozco | © 2025 (Licencia MIT) */
#blog-pager, .blog-pager {
  display: block;
  padding: 5px 0;
  text-align: center;
  margin-top: 20px;
}
.showpage a, .pagenumber a, .totalpages, .current {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  background: #ffffff;
  color: #007BFF;
  border: 1px solid #007BFF;
  font-size: 12px;
  border-radius: 5px;
  transition: all .3s;
}
.showpage a.current, .pagenumber a.current {
  background-color: #007BFF;
  color: #fff;
}
.current {
  background-color: blue !important;
  color: white;
  border: 1px solid #0056b3;
  font-weight: bold;
  border-radius: 5px;
  padding: 5px 10px;
  text-decoration: none;
}
.showpage a:hover, .pagenumber a:hover, .current {
  background-color: #0056b3;
  color: #fff;
}
.totalpages {
  font-size: 14px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .totalpages {
    display: none;
  }
}

📌 PASO 5: Guardar y Probar

Guarda los cambios en el editor HTML.
Ve a la página principal de tu blog y verifica que la paginación aparece en la parte inferior.
Si no aparece, vacía la caché del navegador y recarga la página.

Ahora tu blog en Blogger cuenta con una paginación numérica profesional que mejorará la experiencia de tus visitantes. Con este método, tus lectores podrán navegar entre tus publicaciones de manera más sencilla y organizada.

Si tienes dudas o problemas al implementar el código, no dudes en dejar un comentario. ¡Espero que esta guía te haya sido útil!

Espero haberte ayudado

Nota: Si la información del post es incorrecta, por favor, repórtelo:

Reportar Post

Nota: No te pierdas los próximos posts siguiendo el blog:

Seguir blog

Artículos relacionados