23 agosto 2016

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

9 comentarios:

  1. Puedes hacer un video porfavor que
    No entiendo mucho soy nueva y se me hace complicado

    ResponderEliminar
    Respuestas
    1. Dentro de poco, empezaremos a hacer videotutoriales, si gustas puedes pasarte y suscribirte al canal oficial de Pedazo Virtual, un saludo.
      https://www.youtube.com/channel/UCt1t6jsx-1hiYjnBN4CRlUw

      Eliminar
  2. las paginas se agregan solas ?

    ResponderEliminar
    Respuestas
    1. No sé muy bien a que te refieres. Hay que configurar la misma cantidad de entradas por página en el código y en la configuración del blog.

      Eliminar
  3. Muchisimas gracias!! Estuve buscando esto por horas y al fin uno que funciona...

    ResponderEliminar
    Respuestas
    1. Me alegra mucho que te haya servido, saludos!

      Eliminar
  4. me ha funcionado pero veo que no me pagina todas las entradas que tengo en el blog, solo me pagina hasta el numero 22, pero tengo mas entradas, alguna forma de hacer que me pagine todas las entradas que tengo en el blog???

    ResponderEliminar

Categorías

Diseño web

Facebook

Google+

Suscribirse

Enter your email address:

Delivered by FeedBurner

Gana dinero

Con tecnología de Blogger.
 
Suscribirse al boletín
Regístrate con tu dirección de correo electrónico para recibir noticias y actualizaciones directamente en tu bandeja de entrada