Como agregar paginación numerada en blogger

Índice
  1. ¿Qué es la paginación numerada?
  2. Instalación de paginación numerada en blogger
    1. 1. Estilo de la paginación
    2. 2. Agregue la funcionalidad de paginación

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.

Paginación numerada en blogger

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.

Jhon Torres

Mi nombre es Jhonatan. Soy un poco adicto a las aplicaciones y tendencias en los medios sociales, soy un entusiasta del cómic, las series de ficción y sobre todo de la tecnología. Llevo escribiendo por más de 8 años en Tecneófito de manera profesional.

Entradas relacionadas

    2 Opiniones de los Usuarios

  1. Li_Shaoran dice:

    gracias por el codigo..
    Me funciona bien excepto en la parte cuando seleccionas una etiqueta,
    como por ejemplo la etiqueta de peliculas para que solo te muestra esas entradas,
    aparece el boton de Antiguos, cuando le das click al boton ya que cuando carga el codigo.

    Saludos y gracias..

  2. Fernando dice:

    Hola, me gusta mucho esta paginación, lo único que no me gusta es que Page y Of estén en ingles. He intentado subir el script modificado a algún alojamiento y no he podido, si cambio la dirección no funciona, lo he intentado poner en la plantilla y tampoco funciona. ¿hay alguna manera mas de cambiarlo?, es de las pocas cosas que no puedo poner en español, y por eso no lo pongo, la otra cosa es la palabra anonymous de los comentarios, pero eso es otro cantar. Espero que estes bien con la que esta cayendo. Un saludo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir