Hace unos días eché un vistazo a mi viejo script de paginación para el blog y vi un script alge ineficiente y poco configurable.
Por eso he escrito uno nuevo, lleno de opciones, para que podáis editar todo completamente. Además, es mucho más pequeño (aproximadamente la mitad que el otro)
Ahora os enseño cómo usarlo. Tenéis que pegar un script en la parte de abajo de la plantilla. Un buen lugar es encima de </body>:
<script src='http://dl.dropbox.com/u/71679931/share/paginacion-min.js'/>
<script>
var opcionesPaginacion = {/*Aquí tus opciones*/}
</script>
<script src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=9999&callback=paginacion'/>Actualización
Hay un bug en la paginación si se va por las etiquetas, además de que se me pasó decirles que para que no aparezca en los posts individuales, etc es necesario meter todo en un condicional. Así se soluciona todo (gracias a Andrés Galarza por avisar):
<b:if cond='data:blog.pageType == "index"'>
<script src='http://dl.dropbox.com/u/71679931/share/paginacion-min.js'/>
<script>//<![CDATA[
var opcionesPaginacion = {/*Opciones*/};
(function(d,s){
var src = '/feeds/posts/summary', url = d.URL, js = d.createElement(s), p = d.getElementsByTagName(s)[0];
src += /\/label\//.test( url ) ? "/-/"+ url.match(/\/label\/[^?^]*/)[0].substring(7): '';
js.src = src + "?alt=json-in-script&max-results=9999&callback=paginacion"
p.parentNode.insertBefore(js,p)
})(document,'script')
//]]></script>
</b:if>Además de este modo, sólo cargamos un script dependiendo de la página, y lo hacemos asíncronamente (lo que es mejor para la carga de la página).
Opciones
Aquí tenéis un ejemplo con todas las opciones disponibles. No es necesario usar todas. De hecho no es necesario usar ninguna, aunque recomiendo que se especifique al menos postPorPag.
Aquí vienen las opciones por defecto. La explicación de las opciones viene comentada abajo:
var opcionesPaginacion = {
//Ésta no hace falta especificarla, viene por defecto
paginaActual: location.href,
//Post por cada página
postPorPag: 7,
//El número de entradas que tiene la primera página
postsPrimeraPag: 7,
//El cantidad de botones que tiene.
numerosDePag: 6,
//Texto del botón anterior
textoAnterior: "Anterior",
//Texto del botón siguiente
textoSiguiente: "Siguiente",
//Texto del botón para ir a la primera
textoPrimera: "«",
//Texto del botón para ir a la última
textoFin: "»",
//Si se quiere que se muestre "..." si se han recortado páginas
mostrarPuntos: false,
//La clase que se muestra para el botón de la página actual
claseActual: "activo",
//La plantilla de los links:
//Nota: Es necesario que haya mínimo una clase (si no se quiere, es posible poner class='')
//Si no no funciona el la clase para el botón actual
//{{link}}=>La url
//{{num}}=>El número de página o textos de Anterior, Primera...
plantillaPagLink: "<span class='boton'><a href='{{link}}'>{{num}}<\/a><\/span>",
//La plantilla del resto.
//{{num}}=> El número de página actual y los puntos suspensivos
plantillaPagPlain: "<span class='boton'>{{num}}<\/span>",
//El contenedor en el que estarán (por la parte de arriba).
//En esta opción y en la siguiente es posible usar el texto {{total}} para mostrar el número de páginas total
//Ej: '<div class="contenedor-pags"><span class='total'>{{total}}</span>
htmlBefore: '<div class="contenedor-pags"><div class="grupo-botones paginacion">',
//Lo mismo pero para después. recuerda cerrar todas las etiquetas abiertas
htmlAfter: '<\/div><\/div>'
};
Recomendaciones
Recomiendo ampliamente usar al menos las siguientes opciones:
postPorPag: indica el número de posts que quieres que tengan las páginas. Si no es el mismo que la principal, es necesario especificarpostPrimeraPag.numerosDePag: indica la cantidad de enlaces que tiene la paginación. Si no se especifica, se mostrarán todos.
El resto son opcionales.
El CSS
El CSS puede ir a vuestro gusto. Yo sinceramente usé el css a mi medida, así que aquí están las clases para personalizarlo (si no especificáis otras en las opciones):
Nota: Este código está hecho para el uso en toda la plantilla. Es posible que alguna declaración en concreto sobre. Por el resto, si de alguna manera interfiere en vuestros estilos, añadid a todas las clases delante: #blog-pager, por ejemplo.
.grupo-botones {
display: inline-block;
margin-bottom: 10px;
}
.grupo-botones .boton {
float: left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border-left: 0;
}
.grupo-botones .boton:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
border-left: 1px solid #CCC;
}
.grupo-botones .boton:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.boton {
display: inline-block;
cursor: pointer;
color: #515151;
text-decoration: none;
font-weight: 600;
padding: 3px 10px;
border: 1px solid #CCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #F1F1F1;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#F9F9F9,0),color-stop(#E3E3E3,1));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
background: -moz-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
background: linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
-webkit-box-shadow: 0 1px rgba(255,255,255,.2) inset;
-moz-box-shadow: 0 1px rgba(255,255,255,.2) inset;
box-shadow: 0 1px rgba(255,255,255,.2) inset;
}
.boton:hover{
background: #E3E3E3;
}
.boton.activo, .boton:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.boton.activo {
background: whiteSmoke;
}Versión sin comprimir:
Si tenéis curiosidad y queréis ver el script sin comprimir, está aquí
Demo
Podéis verlo en éste blog de pruebas