Paginación para Blogger

La paginación sirve para navegar por las entradas del blog mediante unos cuadraditos de paginación.
Ejemplo de paginación:

Para hacer este proceso podemos utilizar dos métodos: mediante modificación de la plantilla o añadiendo un gadget (html).

Método A (Modificación de la plantilla)

Entramos a Diseño, Edición de HTML y nos aseguramos de que NO tenemos marcada la opción de Expandir artilugios. Buscamos ]]></b:skin> y antes pegamos el siguiente código:

.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;
}

Todas estas propiedades se pueden cambiar a tu gusto.
.showpageArea a: Contenedor 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.

Ahora localizamos </body> y justo antes pegamos 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>

En este código también podemos cambiar los valores:
var pageCount=5: Número de entradas que se mostrarán en cada página.
var displayPageNum=3: La cantidad de cuadraditos 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 anteriores.
var downPageWord="Siguientes": Texto para el botón de las páginas siguientes.
Si hacemos una vista preliminar veremos que el artilugio se muestra y funciona perfectamente, pero 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 todos los códigos: 'data:label.url'
Allí donde estuviera ese código, debemos sustituirlo por 'data:label.url + &quot;?&amp;max-results=5&quot;'
Se ha usado el número 5 porque es el número de posts por página que seleccionamos al principio. Si hemos seleccionado un número diferente ahora tendremos que usar el número correspondiente en lugar de 5.

Sólo hay que cambiar el código 'data:label.url' que sea exactamente igual, con sus comillas simples incluidas. En algún sitio del css os encontraréis ese mismo código pero sin comillas simples, en ese caso NO se tiene que modificar.
Una vez hechas las sustituciones, guardamos la plantilla y ya funcionará perfectamente.

Método B (Añadiendo un gadget)

Añadimos un nuevo gadget HTML/JavaScript en cualquier parte de Elementos de la página 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:
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 anteriores
var downPageWord="Siguientes" : Texto para el botón de las páginas siguientes
.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.

Ahora tenemos que mover el gadget debajo de Entradas del Blog para que empiece a funcionar en su posición correcta.
Si hacemos una vista preliminar veremos que el artilugio se muestra y funciona perfectamente, pero 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 (Diseño, Edición de HTML) con los artilugios expandidos y buscar todos los códigos: 'data:label.url'
Allí donde estuviera ese código, debemos sustituirlo por 'data:label.url + &quot;?&amp;max-results=5&quot;'
Se ha usado el número 5 porque es el número de posts por página que seleccionamos al principio. Si hemos seleccionado un número diferente ahora tendremos que usar esa en lugar de 5.
Sólo hay que cambiar el código 'data:label.url' que sea exactamente igual, con sus comillas simples incluidas. En algún sitio del css os encontraréis ese mismo código pero sin comillas simples, en ese caso NO se tiene que modificar.
Una vez hechas las sustituciones, guardamos la plantilla y ya funcionará perfectamente.