Paginación en Blogger

Tomado de Oloblogger

Entre otros, este ha sido uno de los gadgets destacados de 2009. Hay ya muchas explicaciones, de cómo aplicar este script que sirve para navegar por las entradas mediante unos cuadraditos de paginación; pero el caso es que de vez en cuando todavía seguís preguntando por este artilugio. Así que, para general constancia, hemos decidido crear este post.

La información original la teneis en Blogger Widgets y otra explicación en castellano por si la de esta entrada no se entiende bien, en Gem@ Blog.

Aunque en esencia es lo mismo, podemos instalar el artilugio de tres maneras.

Sistema A (semi-automático)

1. Nos logueamos en nuestra cuenta de Blogger y a continuación accedemos a la página de BloggerPluggins correspondiente a este gadget. Rellenamos los datos de las casillas según nos interese.

Si no quereis calentaros la cabeza, los valores que se ven en la imagen quedarán bien para un blog en español, pero por si acaso, este es el significado de las distintas variables que se piden:

    * Previous Page Text: Texto para el botón de las páginas previas
    * Next Page Text: Texto para el botón de las páginas siguientes
    * Posts Per Page: Número de entradas que se mostrarán en cada página
    * Max Number of Page... : La cantidad de cuadraditos máxima que se mostrarán delante y detrás de la página activa


2. Ahora pinchamos en Customize y a continuación en Add Widget To My Blog. Se nos abrirá una nueva página (ya en Blogger) y desde allí pinchamos en Añadir Artilugio para que el idem se instale automáticamente en nuestro blog.

3. Por último, tenemos que ir a nuestro Panel de Control y desde Elementos de Página, desplazamos el gadget desde la barra lateral, hasta situarlo justo debajo del bloque de Entradas del Blog. Pinchamos en Guardar y comprobamos que ya tenemos nuestro marcapáginas activo.

4. Entrando por Elementos de Página y Editando el gadget, veremos que al principio lleva todo el código del estilo entre etiquetas <style>. Allí es dónde podremos cambiar colores de texto y fondo, efecto hover, espaciado, etc.

Sistema B (añadiendo un gadget)

1. Añadimos un nuevo gadget HTML/JavaScript y allí pegamos este código:

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">var pageCount=5;var displayPageNum=3;var upPageWord="Anteriores";var downPageWord="Siguientes";</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

Para personalizarlo se pueden cambiar los siguientes valores antes de Guardar el gadget:

    * var pageCount=5 : Número de entradas que se mostrarán en cada página
    * var displayPageNum=3 : La cantidad de cuadraditos máxima que se mostrarán delante y detrás de la página activa
    * var upPageWord="Anteriores" : Texto para el botón de las páginas previas
    * var downPageWord="Siguientes" : Texto para el botón de las páginas siguientes

También antes de Guardar o Editando posteriormente, podeis configurar todo el aspecto de la botonera de las páginas modificando las propiedades de las clases correspondientes:

.showpageArea a : Contenedor general del artilugio. Enlace.
.showpageNum a : Cada uno de los botones, excepto la página activa. Enlace.
.showpageNum a:hover : Idem anterior. Enlace al pasar el puntero.
.showpagePoint : El botón de la página activa.
.showpageOf : Texto que muestra el total de páginas.
.showpage a : Botones de texto Anteriores/Siguientes. Enlace.
.showpage a:hover : Botones de texto Anteriores/Siguientes. Enlace al pasar el puntero.
.showpageNum a:link,.showpage a:link : Para no cambiar los enlaces visitados.

Este código es el mismo al que podemos acceder cuando viendo la imagen del punto A.2, pinchamos en Editar Contenido. Comento esto porque aunque el resultado sea el mismo, en ocasiones es conveniente ver qué es lo que estamos instalando... sobre todo si la fuente no es fiable.

2. Al igual que antes, el gadget hay que moverlo debajo de Entradas del Blog para que empiece a funcionar.

3. Si vamos probando, veremos que el artilugio se muestra y funciona perfectamente en la navegación por fechas, pero que cuando accedemos a una entrada o navegamos por etiquetas, aparecen los enlaces habituales (Entradas Antiguas / Entradas más recientes). Para solucionar esto hay que acceder al código de la plantilla con los Artilugios Expandidos y buscar todas las menciones a la variable 'data:label.url'. Allí donde estuviera ese trozo de código, sustituirlo por 'data:label.url + &quot;?&amp;max-results=5&quot;'

Aquí se ha usado el número 5 porque es el número de posts por página que seleccionamos al principio. Si hubiéramos optado por otra cifra entonces, ahora tendríamos que usar esa en lugar del 5.

Ojo al buscar la cadena 'data:label.url'. Sólo hay que cambiar aquella que sea exactamente igual, con sus comillas simples incluidas. En algún sitio os encontrareis la variable formando parte de un condicional, pero no está encerrada entre comillas y en ese caso NO hay que sustituir nada. Por lo general encontrareis cuatro ocurrencias, pero puede haber alguna más o alguna menos.

Una vez hechas las sustituciones, Guardamos la plantilla y ya funcionará el gadget también para la navegación por etiquetas. En las páginas individuales de las entradas, seguirá sin funcionar, pero esto es lo lógico puesto que aquí no se pueden mostrar cinco posts, sino sólo aquel al que se accede.


Sistema C (modificando plantilla)

1. Editamos plantilla y antes de ]]></b:skin> pegamos toda la parte CSS que configura el estilo de la botonera.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Igual que se ha explicado anteriormente (ver B.1), todas estas propiedades se pueden cambiar para adaptar la estética a la de nuestro blog.

2. Ahora localizamos </body> y justo antes pegamos los parámetros y la llamada a la función JavaScript.

<!-- Paginación -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
</b:if>

También se pueden configurar los valores de las variables var pageCount, displayPageNum, upPageWord y downPageWord, y su significado es el mismo que ya tambien se explicó antes (B.1).

3. Ahora hacemos la sustitución de 'data:label.url' explicada en B.3 y Guardamos cambios.