Crear un sistema de paginación en Blogger (Tutoriales)

Todas las personas que usamos Blogger, en algún momento hemos querido modificar el apartado de las entradas recientes y antiguas, pero además de modificarla un poco con imágenes, podemos crear un sistema de páginación muy estilizado, que dará como resultado lo siguiente:

Para ello hay que ir a Plantilla » Editar HTML, y pegar antes de </body> el siguiente script:

<b:if cond='data:blog.pageType == "index"'>
    <script src='http://dl.dropbox.com/u/71679931/share/paginacion-min.js'/>
    <script>//<![CDATA[
    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,
    //La 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: "&laquo;",
    //Texto del botón para ir a la última
    textoFin: "&raquo;",
    //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>'};
        (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>

Todo lo que esta en azul es la configuración de la paginación, no hace falta cambiar mucho, pero es muy importante que en postPorPag y en postsPrimeraPag se especifique el número de posts que se muestran en la página principal de tu blog, debe ser el mismo para que no ocurran errores. numerosDePag indica el número de botones que tiene la páginación, en caso de que no se especifique, se mostrarán todos.

Por último, debes pegar el siguiente código CSS, preferiblemente antes de ]]></b:skin>

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

con el código CSS puedes personalizar la paginacion a tu gusto. Eso es todo, en caso de que el link del archivo paginacion-min.js se caiga, les dejo a continuación un enlace para que puedan descargarlo y alojarlo cuando sea necesario.

Enlaces de descarga

paginacion-min.js
MEGA