Blogger

Paginación con estilo WP-PageNavi en Blogger (BlogSpot)

Si usted usa WordPress, quizás hayas escuchado algo sobre WP-PageNavi, un plugin de paginación muy famoso. Pero en Blogger (blogspot) no se pueden usar “plugins”. Blogger sólo proporciona enlaces a “Anterior” y “Siguiente”, y lamentablemente muchos usuarios no están satisfechos con eso. En este post, le mostraremos un código para hacer una paginación hermosa con estilo WP-PageNavi en Blogger.

Este código es totalmente nuevo y no está basado en los códigos existentes.

Cómo instalar

1. Instale el estilo CSS

Abra el editor HTML de su plantilla y busque la siguiente línea:

]]></b:skin>

Antes de ese código, pegue lo siguiente:

    /* Page Navigation */
    .pagenavi{clear:both;margin:10px auto;text-align:center}
    .pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
    .pagenavi a:visited{color:#c20c0c}
    .pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
    .pagenavi .pages,.pagenavi .current{font-weight:bold}
    .pagenavi .pages{border:none}

Este estilo por defecto es rojo. Usted puede cambiarlo con los colores que mejor se adapten a su blog.

2. Instalar el Script

En el editor HTML de su plantilla y busque la siguiente línea:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Inserte lo siguiente debajo:

<b:includable id='page-navi'>
<div>
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div />
</div>
</b:includable>

3. Inserte la paginación en su plantilla

El paso final es insertar la paginación en lugar adecuado donde se debe mostrar. En el archivo de su plantilla, encuentre la antigua paginación que debe de ser similar al siguiente código:

<!-- navigation -->
<b:include name='nextprev'/>

Y lo reemplazamos por el siguiente:

    <b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Si no puede encontrar el antiguo código de paginación, entonces busque esta sección de código:

    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
    ...
    <b:includable id='main' var='top'>
    ...
    </b:includable>
    </b:widget>
    </b:section>

Introduzca este código inmediatamente antes del </b:includable>:

    <b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Configuración

Después de instalar, tal vez quiera cambiar algunos parámetros predeterminados. Todos los valores son en el guión del segundo paso anterior:

    var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}

Como puede ver, todos los parámetros tienen sus propios significados claros:

perPage: Número de posts que se mostrarán en cada página

numPages: Número de páginas que se mostrarán en la paginación.

firstText, lastText, nextText, prevText: Simplemente son los textos para el “Primero”, “Último”, “Siguiente”, “Anterior”.

Comparando con otros scritps de paginación de Blogger, este script no obliga a ingresar la URL del blog. Además, puedes ver que aquí el código es limpio y fácil de mantener.

Esperamos que este truco sea de utilidad para usted. Gracias por leernos. Siéntase libre de dejar cualquier sugerencia o duda en los comentarios.

Publicidad

Síguenos en Facebook