Cómo instalar una paginación numérica en Blogger
Cómo poner números de páginas en Blogger
Blogger incluye una navegación básica para recorrer las entradas del blog, pero esta puede variar bastante dependiendo de la plantilla que estés utilizando.
En plantillas modificadas o adaptadas, incluso puede no existir el paginador nativo de Blogger. Esto hace que añadir una navegación numérica requiera modificar directamente la estructura de la plantilla.
Blogger Pagination soluciona este problema permitiendo incorporar una paginación numérica sin tener que construirla manualmente.
El componente está pensado para instalarse de forma sencilla mediante CSS + JavaScript, detectando automáticamente la estructura disponible en la plantilla.
2. ¿Qué hace Blogger Pagination?
El componente incorpora una navegación más completa para recorrer las entradas de tu blog:
- Paginación numérica.
- Botones Anterior y Siguiente.
- Identificación visual de la página actual.
- Puntos suspensivos cuando existen muchas páginas.
- Reemplaza automáticamente el paginador nativo de Blogger cuando está disponible.
- Puede instalarse automáticamente en plantillas que no utilizan el paginador nativo.
- Incluye una alternativa manual para plantillas con estructuras muy personalizadas.
- CSS y JavaScript independientes para facilitar su instalación y configuración.
La idea es que puedas añadir una paginación numérica a tu plantilla sin tener que reconstruir desde cero el sistema de navegación de Blogger.
3. Demostración
Blogger Pagination reemplaza la navegación básica de Blogger por una paginación numérica más clara y cómoda para recorrer las entradas del blog.
Por ejemplo:
Anterior 1 2 3 4 ... 25 Siguiente
La paginación muestra automáticamente la página actual y adapta los números que se muestran cuando el blog tiene muchas páginas. Así puedes recorrer las entradas sin tener que crear manualmente los enlaces de navegación.
El componente mantiene el sistema de navegación de Blogger y se encarga de generar la interfaz numérica. Si la plantilla utiliza el paginador nativo de Blogger, puede detectarlo y utilizarlo automáticamente.
En plantillas modificadas donde el paginador nativo no existe, el componente intenta encontrar automáticamente el área donde se muestran las entradas para colocar allí la paginación.
Nota: La apariencia final dependerá del CSS del componente y de los estilos de la plantilla donde se instale.
4. Descargar el componente
Blogger Pagination es un componente de pago. El código fuente CSS y JavaScript no se muestra directamente en este tutorial. Los archivos están disponibles para quienes adquieren el componente.
Si quieres utilizar Blogger Pagination, primero debes obtener los archivos desde la ficha del producto.
Desde la ficha del producto podrás acceder a los archivos necesarios para la instalación:
Una vez que tengas ambos archivos, puedes continuar con la instalación siguiendo los pasos de este tutorial.
5. Requisitos
Antes de instalar Blogger Pagination, asegúrate de tener lo siguiente:
- Un blog creado en Blogger.
- Acceso a Tema → Editar HTML.
- Los archivos CSS y JavaScript de Blogger Pagination.
- Una copia de seguridad de tu plantilla antes de realizar cualquier modificación.
La copia de seguridad es recomendable porque vas a modificar directamente el código HTML de la plantilla. Si algo sale mal, podrás restaurar fácilmente la versión anterior.
6. Instalación del CSS
El primer paso es añadir los estilos de Blogger Pagination a tu plantilla.
Paso 1: Abre el editor HTML de Blogger
Entra en el panel de administración de tu blog y ve a:
Tema → Editar HTML
Paso 2: Busca la etiqueta </b:skin>
Dentro del editor utiliza la búsqueda del navegador o del propio editor para localizar:
</b:skin>Paso 3: Coloca el CSS
Abre el archivo CSS de Blogger Pagination, copia todo su contenido y colócalo justo antes de la etiqueta </b:skin>.
La estructura debe quedar aproximadamente así:
/* CSS de Blogger Pagination */
</b:skin>No copies el ejemplo anterior como CSS. Debes utilizar el contenido que encontrarás en el archivo CSS del componente.
Después de colocar el código, guarda los cambios de la plantilla.
Importante: No coloques el CSS después de </b:skin>. Debe quedar dentro de la sección de estilos de la plantilla, justo antes de esa etiqueta.
7. Instalación del JavaScript
Después de instalar el CSS, el siguiente paso es añadir el JavaScript que se encarga de generar la paginación y detectar automáticamente la estructura de tu plantilla.
Paso 1: Busca la etiqueta </body>
En el editor HTML de Blogger, busca la etiqueta:
</body>Paso 2: Coloca el JavaScript
Abre el archivo JavaScript de Blogger Pagination, copia todo su contenido y colócalo justo antes de la etiqueta </body>.
La estructura quedará aproximadamente así:
/* JavaScript de Blogger Pagination */
</body>Importante: el archivo JavaScript ya contiene su propia etiqueta <script>. No debes crear otra etiqueta <script> para envolver el código.
Guarda la plantilla después de colocar el archivo.
8. ¿Qué ocurre después de instalarlo?
Una de las principales ventajas de Blogger Pagination es que no necesitas modificar manualmente la estructura de la paginación en la mayoría de las plantillas.
Al cargar el blog, el componente analiza la estructura disponible y determina automáticamente dónde debe colocar la nueva paginación.
Caso 1: Existe #blog-pager
Si la plantilla utiliza el paginador nativo de Blogger y existe un elemento con:
id="blog-pager"el componente lo detecta automáticamente y utiliza ese mismo elemento para mostrar la paginación numérica.
No tienes que eliminar el paginador nativo ni añadir ningún código manualmente.
Caso 2: No existe #blog-pager, pero existe .blog-posts
Si la plantilla no utiliza el paginador nativo, Blogger Pagination busca el contenedor donde se muestran las entradas del blog.
Cuando encuentra un elemento compatible, como:
class="blog-posts"crea automáticamente el contenedor de la paginación y lo coloca debajo de las entradas.
Tampoco tienes que añadir ningún código manualmente.
Caso 3: La plantilla tiene una estructura personalizada
Algunas plantillas modificadas o adaptadas utilizan una estructura diferente y el componente puede no encontrar ni el paginador nativo ni un contenedor compatible para colocar la paginación.
En ese caso, Blogger Pagination no modifica la plantilla de forma arbitraria. En su lugar, muestra un mensaje indicando que debes añadir manualmente un contenedor para la paginación.
Si esto ocurre, sigue las instrucciones de la sección Instalación manual de este tutorial.
Una vez añadido el contenedor y guardada la plantilla, al volver a cargar el blog el componente podrá detectarlo y utilizarlo automáticamente.
9. Instalación manual
Esta opción solo es necesaria cuando Blogger Pagination no puede encontrar automáticamente un lugar donde instalarse, es decir, en el Caso 3 explicado anteriormente.
Si el componente muestra el mensaje indicando que no pudo instalarse automáticamente, debes añadir manualmente el contenedor de la paginación dentro de la estructura de las entradas del blog.
Paso 1: Añade el contenedor
Coloca el siguiente código debajo del contenedor que contiene las entradas del blog:
<div class='ob-pagination' id='ob-pagination'/>El lugar exacto puede variar dependiendo de la plantilla. Lo importante es que el contenedor quede dentro de la estructura principal del índice y después de las entradas.
Paso 2: Guarda la plantilla
Después de añadir el código, guarda nuevamente la plantilla de Blogger.
Paso 3: Recarga el blog
Abre o recarga la página principal del blog para que Blogger Pagination vuelva a analizar la estructura de la plantilla.
Paso 4: El componente detecta el contenedor
En esta ocasión, el componente encontrará automáticamente:
id="ob-pagination"y utilizará ese elemento para mostrar la paginación numérica.
No necesitas modificar el JavaScript. Una vez que el contenedor está colocado correctamente, el componente se encarga del resto.
Consejo: si no estás familiarizado con el HTML de Blogger, utiliza una copia de seguridad de la plantilla antes de realizar este cambio. También puedes consultar la estructura de las entradas desde el editor HTML para identificar el lugar adecuado.
10. Configuración
Blogger Pagination funciona con la configuración incluida en el archivo JavaScript. Para una instalación básica no necesitas modificar nada, pero puedes cambiar algunos valores si quieres adaptar el componente a las necesidades de tu blog.
Entradas por página
Esta variable determina cuántas entradas se consideran para cada página:
var obPostsPerPage = 1;Por ejemplo, si quieres trabajar con 5 entradas por página, cambia el valor a:
var obPostsPerPage = 5;Utiliza el mismo número de entradas que tengas configurado para mostrar en la página principal de tu blog para evitar diferencias entre la paginación y el contenido mostrado.
Texto del botón Anterior
Esta variable permite cambiar el texto que aparece en el botón para regresar a la página anterior:
var obPrevText = 'Anterior';Por ejemplo:
var obPrevText = 'Atrás';Texto del botón Siguiente
Esta variable permite cambiar el texto que aparece para avanzar a la siguiente página:
var obNextText = 'Siguiente';También puedes utilizar otro texto, por ejemplo:
var obNextText = 'Más entradas';Estos son solo algunos valores que puedes personalizar. No es necesario modificar el resto del JavaScript para realizar la instalación normal del componente.
Si no tienes experiencia modificando JavaScript, te recomiendo mantener la configuración original y cambiar únicamente los valores que necesites.
11. Personalización del diseño
Blogger Pagination está diseñado para que puedas adaptar su apariencia al estilo de tu plantilla sin modificar su funcionamiento.
La forma más sencilla de personalizarlo es cambiar las variables de color que aparecen al principio del archivo CSS. Si tienes conocimientos de CSS, también puedes modificar el tamaño, espaciado, bordes y otros aspectos visuales.
Personalizar los colores
Al principio del CSS encontrarás las variables que controlan los principales colores de la paginación:
.ob-pagination {
--ob-pagination-text: #333333;
--ob-pagination-bg: #ffffff;
--ob-pagination-border: #dddddd;
--ob-pagination-active: #333333;
--ob-pagination-active-text: #ffffff;
--ob-pagination-hover: #f2f2f2;
--ob-pagination-disabled: #999999; }Cada variable corresponde a una parte diferente del diseño:
- --ob-pagination-text: color del texto de los números, enlaces y puntos suspensivos.
- --ob-pagination-bg: color de fondo de los botones.
- --ob-pagination-border: color de los bordes.
- --ob-pagination-active: color de fondo y borde de la página activa.
- --ob-pagination-active-text: color del número de la página activa.
- --ob-pagination-hover: color de fondo cuando el cursor pasa sobre un enlace.
La variable --ob-pagination-disabled también está incluida en el componente para futuras necesidades de estados deshabilitados, pero no interviene en el diseño actual.
Ejemplo: cambiar el color de la página activa
Por defecto, la página activa utiliza:
--ob-pagination-active: #333333;Si quieres utilizar, por ejemplo, el azul como color principal de tu plantilla, puedes cambiarlo por:
--ob-pagination-active: #0077cc; También puedes cambiar --ob-pagination-active-text si necesitas utilizar un color diferente para el número de la página activa.
Modificar el tamaño de los botones
El tamaño de los botones se controla principalmente mediante min-width, min-height y padding.
Los valores utilizados actualmente son:
min-width: 34px; min-height: 34px; padding: 6px 10px;Si quieres botones más grandes, puedes aumentar estos valores. Por ejemplo:
min-width: 40px; min-height: 40px; padding: 8px 12px;Modificar el redondeado
El componente utiliza un redondeado ligero:
border-radius: 3px;Para utilizar botones completamente cuadrados:
border-radius: 0;O puedes aumentar el valor para conseguir esquinas más redondeadas:
border-radius: 8px;Modificar la separación entre botones
La separación entre los elementos se controla mediante la propiedad gap:
gap: 4px;Por ejemplo, puedes aumentar la separación:
gap: 8px;También puedes reducirla si quieres una paginación más compacta.
Modificar el tamaño del texto
El tamaño del texto de los números y enlaces se controla mediante:
font-size: 14px;Puedes cambiar este valor según el diseño de tu plantilla. Por ejemplo:
font-size: 16px;Personalizar Anterior y Siguiente
Los botones Anterior y Siguiente tienen un espaciado horizontal ligeramente mayor que los números de página.
Actualmente utilizan:
padding-left: 12px; padding-right: 12px;Si quieres hacer estos botones más anchos, puedes aumentar ambos valores.
Personalizar la separación y posición de toda la paginación
El componente ocupa todo el ancho disponible y centra automáticamente sus elementos.
El espacio exterior se controla mediante:
margin: 24px 0;Puedes aumentar o reducir este valor para controlar la distancia entre la paginación y el contenido del blog.
La propiedad justify-content: center; mantiene la paginación centrada. Si tienes conocimientos de CSS, puedes cambiar este comportamiento para alinearla de otra manera.
Personalización para dispositivos móviles
Blogger Pagination incluye una regla específica para pantallas pequeñas:
@media (max-width: 480px) {En dispositivos de hasta 480 píxeles, los botones reducen ligeramente su tamaño para aprovechar mejor el espacio disponible.
En esta sección se pueden modificar valores como:
min-width: 32px; min-height: 32px; padding: 5px 8px; font-size: 13px; gap: 3px;También puedes modificar el espaciado de los botones Anterior y Siguiente para adaptarlos a pantallas pequeñas.
Recomendación:
Si estás empezando con CSS, modifica únicamente las variables de color que aparecen al principio del componente. Es la forma más segura de adaptar Blogger Pagination al diseño de tu plantilla.
Si tienes conocimientos de CSS, puedes modificar tamaños, espacios, bordes, tipografía y comportamiento responsive. Evita modificar la estructura HTML generada por el JavaScript o las clases del componente si no sabes qué función cumplen.
12. Solución de problemas
No aparece la paginación
Si la paginación no aparece después de instalar el componente, comprueba los siguientes puntos:
- Que el archivo CSS esté instalado correctamente.
- Que el archivo JavaScript esté instalado correctamente.
- Que hayas guardado la plantilla después de realizar los cambios.
- Que el blog tenga suficientes entradas para que exista más de una página.
- Que no existan errores de JavaScript en la plantilla.
También puedes abrir las herramientas de desarrollador del navegador y revisar la consola para comprobar si aparece algún error de JavaScript.
Aparece el mensaje de instalación manual
Este mensaje significa que Blogger Pagination no pudo identificar automáticamente una estructura compatible con la plantilla.
No necesariamente significa que el componente esté fallando. Algunas plantillas modificadas o adaptadas utilizan estructuras diferentes a las que el instalador automático puede reconocer.
En ese caso, sigue las instrucciones de la sección 9. Instalación manual y añade el contenedor indicado en la plantilla.
Después de guardar y recargar el blog, el componente volverá a analizar la estructura y podrá utilizar el contenedor que has añadido.
La paginación aparece, pero se ve mal
Si la paginación funciona pero algunos elementos tienen un tamaño, color, margen o posición diferente a la esperada, es posible que algún estilo de la plantilla esté interfiriendo con el CSS del componente.
Esto puede ocurrir especialmente en plantillas que tienen reglas generales para elementos como a, span, div o botones.
En ese caso, revisa los estilos de la plantilla y, si es necesario, añade una regla CSS más específica para los elementos de Blogger Pagination.
Consejo: antes de modificar el CSS original, guarda una copia del archivo. Así podrás volver fácilmente a la configuración anterior si el resultado no es el esperado.
¿Quieres seguir aprendiendo a adaptar plantillas a Blogger?
Si quieres aprender desde cero cómo analizar una plantilla HTML, conservar su diseño e integrar las funciones de Blogger paso a paso, puedes continuar con el Training Blogger desde Cero. Allí encontrarás las clases y recursos que te ayudarán a avanzar con este tipo de adaptaciones de forma práctica.
13. Preguntas frecuentes
Estas son algunas de las dudas más comunes al instalar Blogger Pagination en una plantilla de Blogger.
¿Funciona en cualquier plantilla de Blogger?
El componente está diseñado para funcionar con la mayoría de las plantillas de Blogger, tanto nativas como adaptadas o personalizadas. La instalación automática busca diferentes elementos de la estructura de la plantilla para encontrar un lugar donde colocar la paginación.
En plantillas con una estructura demasiado personalizada puede ser necesario utilizar la instalación manual.
¿Tengo que eliminar la paginación nativa de Blogger?
No. Blogger Pagination intenta detectar automáticamente el paginador nativo de Blogger mediante #blog-pager y utilizar ese mismo elemento para mostrar la paginación numérica.
Por lo tanto, no es necesario eliminarlo ni modificarlo manualmente en una instalación normal.
¿Tengo que añadir el <div> manualmente?
Normalmente no. El componente intenta instalarse automáticamente utilizando el paginador nativo o buscando el contenedor de las entradas del blog.
Solo tendrás que añadir manualmente el contenedor #ob-pagination cuando la estructura de tu plantilla no permita encontrar ninguno de esos elementos.
¿Puedo cambiar el número de entradas por página?
Sí. Puedes modificar la cantidad de entradas que se muestran en cada página desde la configuración del JavaScript.
Por ejemplo:
var obPostsPerPage = 1;Cambia el número 1 por la cantidad de entradas que quieras mostrar por página.
¿Puedo cambiar los colores y el diseño?
Sí. El diseño de la paginación se controla mediante CSS, por lo que puedes modificar colores, fondos, bordes, espaciado, tamaño de fuente, estados hover y otros detalles visuales.
El archivo CSS se mantiene independiente del JavaScript, así que puedes personalizar la apariencia sin modificar la lógica de funcionamiento del componente.
¿Necesito saber programar para instalarlo?
No para realizar la instalación básica. Solo necesitas saber acceder a Blogger → Tema → Editar HTML, colocar el CSS y el JavaScript en los lugares indicados y guardar la plantilla.
La configuración manual o las personalizaciones avanzadas requieren un poco más de conocimiento de HTML, CSS o JavaScript.
Blogger Pagination permite incorporar una navegación numérica a un blog de Blogger sin tener que construir manualmente todo el sistema de paginación.
Instala el CSS y el JavaScript, guarda la plantilla y deja que el componente analice automáticamente su estructura. Si encuentra el paginador nativo de Blogger, lo utiliza; si no existe, intenta crear la paginación debajo de las entradas. Solo tendrás que intervenir manualmente cuando la estructura de tu plantilla no permita una instalación automática.
De esta manera puedes mejorar la navegación de tu blog manteniendo una instalación sencilla y separando la estructura, el diseño y la lógica del componente.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario