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 prevpagey nextpageque 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.