Como agregar paginación numerada en blogger

La paginación estándar de Blogger le permite a los lectores mostrar enlaces de “publicaciones antiguas” y “publicaciones más recientes” en la parte inferior de la página principal o “home”, lo cual es útil para ayudar a sus visitantes a conocer las demás publicaciones de su blog. El único problema es que estos enlaces pueden no ser notados a veces y esto le da a tu blog menos páginas vistas.

¿Qué es la paginación numerada?

La paginación numerada es un menú de navegación numérica que generalmente está presente en la parte inferior del indice. Divide todo tu blog en diferentes páginas, al igual que las páginas de un libro. Los usuarios simplemente pueden navegar a través de la página 1, 2, 3, 4 y etc. Adjuntamos una captura de pantalla a continuación para que los usuarios puedan entender nuestras palabras fácilmente.

Esta publicación le mostrará cómo agregar una paginación numerada en su lugar, reemplazando la paginación publicaciones antiguas / más reciente con una navegación numérica que les permite a los usuarios saltar páginas.

Instalación de paginación numerada en blogger

Antes de continuar, asegúrese de hacer una copia de seguridad de su plantilla de Blogger .

1. Estilo de la paginación

En primer lugar, agregaremos el estilo al CSS. Para hacerlo, vaya a Plantilla> Editar HTML y busque la etiqueta ]]></b:skin>. Justo encima de la etiqueta pege el siguiente código.

/* Start XOmisse Paginacion - Custom CSS */
#blog-pager, .blog-pager {
display:block;
padding:5px 0;
}
.showpage a, .pagenumber a, .totalpages, .current {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 2px;
background: #ffffff;
color: #333;
border: 1px solid #f2f2f2;
font-size: 12px;
border-radius: 2px;
transition: all .3s;
} 

.showpage a:hover, .pagenumber a:hover, .current {
background: #333333;
color: #ffffff;
text-decoration:none;
}
/* Fin XOmisse Paginacion */

Si tienes conocimientos básicos de programación puedes editar el código CSS mostrado anteriormente, para personalizar el aspecto de la paginación y adaptarlo al diseño de tu blog. Despliega tu creatividad y agrega el estilo que desees.

2. Agregue la funcionalidad de paginación

Ahora podemos agregar el JavaScript para convertir la navegación  predeterminada en una paginación numérica en las páginas de índice.

Vuelva a ir a Plantilla> Editar HTML. Busque la etiqueta de cierre del cuerpo </body>, que estará cerca del final de su plantilla. Justo encima de la etiqueta de cierre pegue lo siguiente.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Start XOmisse Pagination -->
<script type='text/javascript'> //<![CDATA[ /** Compartido por XOmisse **/
var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js' type='text/javascript'/>
<!-- End XOmisse Pagination -->
</b:if>

 

El postperpage muestra la cantidad de publicaciones que aparecerán en cada página. Esto debe coincidir con el número que seleccionó en Configuración> Entradas, comentarios y elementos compartidos e indicar el maximo de publicaciones que desea mostrar.

El numshowpage muestra la cantidad de páginas que desea que se muestren en la navegación de la página numerada.

También puede cambiar el prevpagenextpageque muestra el texto que desea mostrar.

Luego, guarde la plantilla, y eso es todo ahora compruebe que la paginación numerada en las páginas de índice funcione correctamente.

Mira más contenido relacionado

Programando a tu whatsapp bot en Android

por Manuel Zambrano Spicer, octubre 29, 2018

A día de hoy, la famosa App cuenta con 1200 millones de usuarios activos que no paran...

Como agregar iconos de redes sociales en blogger con FontAwesome

por Jhon Torres, septiembre 18, 2018

¿Como agregar iconos de redes sociales a tu blog en blogger ? Una de las soluciones...

GDPR para bloggers: cómo cumplirlo y por que me afecta

por Jhon Torres, septiembre 13, 2018

A comienzos del año 2012, la Comisión Europea estableció planes para la reforma de la...

Cómo diseñar una imagen con Canva

por Manuel Zambrano Spicer, septiembre 12, 2018

Que tal, hace un tiempo atrás vengo utilizando el diseñador de imágenes en linea...

Cómo verificar mi sitio de WordPress en Pinterest

por Jhon Torres, agosto 24, 2018

¿Te encanta usar Pinterest en tu sitio web de WordPress? De ser así, debería...

Cómo crear una página de inicio de sesión personalizada en WordPress

por Jhon Torres, agosto 22, 2018

La página de inicio de sesión por defecto de WordPress en wp-login.php, se ve...