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&amp;orderby=published&amp;max-results=9999&amp;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: "&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>'
};

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 especificar postPrimeraPag.
  • 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

138 pensamientos en “Paginación para blogger más ligera, configurable y fácil.

  1. Imagen de COCINA CASERA el dijo:

    Soy nueva en tu blog, el mio le modifico según blog como el tuyo, he dado con este a través de un comentario que has echo en otro y he de decir que para la edad que tienes me he quedado alucinada con los conocimientos que tienes, lo bien explicado que esta y la pedazo de plantilla que tienes…

    Si sigues por este camino y dedicandote a esto de la informática te aseguro que vas a tener un exito enorme.

    No tienes nada que envidiar a blogs sobre esta temática que llevan años en el sector, te expresas y explicas mejor que muchos!

    Enhorabuena y nada, ya me verás más a menudo por tu sitio!

    Saludos,

    Bea

  2. Imagen de Andres GalarzaAndres Galarza el dijo:

    Muchas gracias por este tutorial y por vuestra ayuda, es fantastico! y de nuevo te agradezco porque en buena hora porfin encontre esto que tanto buscaba y que no hallaba, muchas gracias!

    Solo tengo una preguntilla, es posible ocultar la parte que muestra la cantidad de paginas en total debajo de los numeros del paginador?, es algo asi como esto: "(12)", … a mi me gustaria poder acultarlo pero yo de esto no entiendo mucho mas ahora conozco tu blog y te lo agradezco, esa es mi preguntilla!

    Mientras yo estaré pendiente de tu respuesta aquí, gracias Emilio Cobos, los mejores deseos!

    • Imagen de Andres GalarzaAndres Galarza el dijo:

      Hola Emilio Cobos, de nuevo yo, primero gracias por tu respuesta, ahora veo, bien, tengo otra preguntilla mas lo que pasa es que en mi blog en las paginas item osea las entradas, el paginador se muestra igual que en la pagina de inicio, me explico, por ejemplo, en este tu blog el paginador se ve en la pagina principal del blog y en las paginas index, pero no en las entradas, en las entradas se ve es: "Entrada más reciente – Pagina Principal – Entrada antigua".. y ese es el problema, que en mi blog en todas los tipos de pagina, hasta en las paginas estaticas, se ve el paginador igual, no se si sea un error mio o si depronto esta en vuestro script, …. eso es todo, te agradezco por tu ayuda, que estes bien y muchas gracias!

      Estarè atento a tu respuesta!

    • Imagen de Andres GalarzaAndres Galarza el dijo:

      Hola Emilio, gracias de nuevo ya añadi lo anterior que me respondisete y quedo correctamente, pero te comento que hay algo mas, te pido me disculpes por molestar tanto, pero es que no conozco mucho sobre esto, mira lo que sucede es que en las etiquetas el paginador no pagina correctamente, es como si siempre estuviera en la pagina de inicio cuando voy a ver una etiqueta, es decir, por ejemplo: "/search/label/Matematicas" ahì el paginador debe paginar las entradas que estan etiquetadas con la etiqueta "matematicas" pero el paginador no las pagina, sigue mostrandose como en la pagina de inicio, así como pasa aquí en tu blog, fijate y veras:

      http://emiliocoboscmc.blogspot.com/search/label/Javascript

      eso mismo me pasa a mi…

      Eso es todo Emilio, de veras que te agradezco por tu ayuda y paciencia conmigo como lector tuyo, gracias y te deseo lo mejor!

      estaré pendiente de tu respuesta!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Solucionado. He cambiado el script y la forma de incrustarlo para que se pueda paginar en las etiquetas (puedes verlo funcionando aquí mismo), sin tener que agregar muchas líneas de código (lo he hecho con 4 palabras más).

      He agregado una sección al post para que veáis como instalarlo de esta manera. De todas formas al resto de personas que ya lo hayan aplicado de la otra, sólo les fallará ese detalle.

      Gracias de veras por avisar del fallo, siempre puede haber errores ;)

  3. Imagen de Andres GalarzaAndres Galarza el dijo:

    Emilio, gracias de nuevo!, mas queria preguntarte, ¿Debo pegar completo el nuevo codigo que pusiste en la entrada o como debo ponerlo en miplantilla para que quede organizado?

    Te agradezco, y creo que esta es la ultima pregunta que te hago, no quiero molestarte, pues me has ayudado demasiado y te agradezco!

    Un saludo, estarè pendiente de tu respuesta!

  4. Imagen de Para Nosotras Bs As el dijo:

    No me funciona :( es muy probable que haya sido por un error mio.

    antes de /body puse:

    […]
    [CDATA[
    var opcionesPaginacion = {
    paginaActual: location.href,
    postPorPag: 5
    postsPrimeraPag: 5,
    textoAnterior: "Anterior",
    textoSiguiente: "Siguiente",
    numerosDePag: 5,
    claseActual: "activo",
    };
    (function(d,s){
    var src = '/feeds/posts/summary',
    […]

    Tenés idea de qué puedo haber hecho mal? Tenía una sola entrada, hice 26 más (sin contenido) para verificar si funcionaba. Muchas Gracias :)

  5. Imagen de Redacción del Blog el dijo:

    Hola Emilio:
    Mi pregunta es la siguiente. Quiero que en mi blog salga un solo post por entrada y no sé como hacerlo.
    En editar entradas ya he puesto una , pero se ve que solo sirve para la entrada principal.

    Saludos,
    Manuel

  6. Imagen de rolando hernandezrolando hernandez el dijo:

    hola ke tal,si tengo muchas paginas con esta paginacion si se ven todas?,porque he probado con un monton de paginaciones para blogger y en todas solo se ve cierta cantidad,no todas,espero tu respuesta,saludos.

  7. Imagen de Emilio Cobos Álvarez el dijo:

    En tu caso deberías de pegar esto:

    <b:if cond='data:blog.pageType == "index"'>
        <script src='http://dl.dropbox.com/u/71679931/share/paginacion-min.js'/>
        <script>//<![CDATA[
            var opcionesPaginacion = {
                numerosDePag: 1000
            };
            (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>
    • Imagen de Emilio Cobos Álvarez el dijo:

      Ves el pedacito de código:

      var opcionesPaginacion = {
          numerosDePag: 1000
      }

      Pues ahí deberían de ir, junto con el resto. Por ejemplo, suponiendo que tienes 5 posts por página, lo pondrías así:

      var opcionesPaginacion = {
          numerosDePag: 1000,
          postsPorPag: 5
      }

      Y así con todas las opciones que quieras modificar.

    • Imagen de Emilio Cobos Álvarez el dijo:

      No sé, el cálculo de las páginas parece funcionar bien… Si me dejas una imagen puedo ayudarte con lo de los estilos. De todas maneras con poner encima de </b:skin> los estilos que vienen en la entrada, debería de quedar algo parecido (no exacto) a lo que tiene Iniciablog.

      Pero lo dicho, sin una imagen es difícil poderte ayudar a dejarlo como lo quieres.

  8. Imagen de carlocarlo el dijo:

    buen script pero se podra utilizar esta paginacion tambien en los resultados busqueda de blogger ya que la mayoria de estos codigos solo cubren lo que es la navegacion en la pagina de inicio y en las tags

    ya utilizan las urls:
    http://mi-blog.blogspot.com/search?updated-max=2012-10-23T08%3A28%3A00-07%3A00&max-results=16#PageNo=3

    http://mi-blog.blogspot.com/search/label/tag12?updated-max=2012-10-18T01:48:00-07:00&max-results=20&start=20&by-date=false

    pero se olvidan de paginar la busqueda de blogger

    que utiliza este tipo de urls

    http://mi-blog.blogspot.mx/search?q=cami

    seria genial que tambien se incluyera esto

    saludos esta excelente tu blog.

  9. Imagen de IsraelIsrael el dijo:

    Hola estoy navegando por google, buscando como paginar, y no encuentro nada que me lo aclare o por lo menos no veo yo la aclaración.
    Tengo un blog de un equipo de futbol he puesto el menu desplegable arriba pero me encuentro que voy a hacer paginas para el menu, osease una pagina para clasificación de aficionados, pero dentro de esa pagina que voy a ir poniendo la clasificación quiero paginarla por semanas, osea la jornada 1 pagina 1, jornada 2 pagina 2, etc… No encuentro como hacerlo, si encuentro como hacer la paginación de las entradas pero de las paginas no, gracias por tu comprensión.

    Un saludo.

  10. Imagen de Vhila el dijo:

    Hola Emilio,
    Todo funciona genial, muchas gracias.
    Queria preguntarte como hacer para que en la paginacion funcione con pinchar en el boton, ya que solo funciona si se pincha el numero, no se si me entiendes, por ejemplo en tu paginacion con clickar el boton basta pero en la mia se necesita clickar el numero de la pagina a la que quieres ir.
    Muchas gracias

      • Imagen de VnR CastroVnR Castro el dijo:

        Ok, efectivamente ese era el problema, ya está resuelto, pero veo que cuando cambio de página hay un momento (flash) que aparece la paginación original (página principal página anterior) siempre, esto es asi ó es un problema mio.

        Muchas gracias, un saludo.

      • Imagen de Emilio Cobos Álvarez el dijo:

        Es así, no queda otra. La única manera que tenemos para acceder al feed de un blog de blogger es via javascript (triste pero cierto), y por lo tanto hay que esperar un poco a la carga del script para que se muestre.

  11. Imagen de Cristian.VS el dijo:

    Emilio Cobos Álvarez, primeramente gracias por tomarte el tiempo de responder.

    Dicho esto permite decirte que no me funciona bien (todavía), solo me sale 1234567891011121214……n, como puedo hacer que los estilo me funcione en esta plantilla. gracias, espero tu respuesta, lo dejare así hasta que contacte contigo, gracias.

  12. Imagen de Cristian.VSCristian.VS el dijo:

    Perdona que te pregunte algo mas, pues ya lo primero esta resuelto, en las etiquetas me siguen apareciendo 20 post, pero yo quiero siete.
    Como lo hago?

  13. Imagen de Cristian.VSCristian.VS el dijo:

    gracia emilio por responder, si lo he resuelto me esta información me fue de mucha utilidad, paro como hago para que en la imagen de fondo este enlazada con el numero de la paginacion, si esta en tu posibilidad dame un ejemplo de que debo hacer y que debo buscar, gracias por adelantado

  14. Imagen de manuel el dijo:

    Hola Emilio:
    He seguido el tutorial y me ha salido bastante bien pero tengo un pequeño problema que me gustaria resolver. En la página principal tengo puest el postPorPag: en 10 y en Diseño – entradas, tambien 10,. , pero me sale en la primera pagina 10 y en la siguiente 7 con la particularidad que 3 de la segunda página son de la primera, No sé si me he explicado bien, si lo puedes mirar me harás un favor.
    http://mwc-smartphone.blogspot.com
    Gracias por todo.
    Manuel

  15. Imagen de manuel el dijo:

    Hola Emilio:
    Soy Manuel, del comentario anterior. Mi pregunta no tiene nada que ver con este tutorial sino con el de tu amigo Jesus Gonzalez referente a “Cómo mostrar tu foto junto a tu blog en los resultados de Google”
    aquí http://www.iniciablog.com/2012/11/mostrar-foto-perfil-resultados-google.html debe estar bastante ocupado porque tarda en contestar, aunque otras veces me ha resuelto otros problemas y le estoy agradecido. Se trata de que no se implementar el código de rel=author, algo pasa que no me sale en la vista previa, y como he visto que en el 2º comentario, le haces una observación, creo que me podrás indicar que debo hacer y que es lo que estoy haciendo mal. Decirte que he vinculado mi perfil de Blogger con el de Google+ y me dice esto en los datos estructurados:
    Advertencia: Missing required field “updated”.
    Advertencia: Missing required hCard “author”. Si le puedes echar un vistazo te lo agradeceré http://mwc-smartphone.blogspot.com .

    Gracias,
    Manuel

  16. Imagen de manuel el dijo:

    Hola Emilio:
    Sólo comunicarte que ya está solucionado. Al final me respodió Jesús Gonzalez, y era que no tenia el enlace puesto desde el blog a Google+. Las advertencias me siguen saliendo, pero no sé si son importantes. Si fuera así te ruego me lo comuniques.

    Gracias y saludos,
    Manuel

  17. Imagen de manuel el dijo:

    Lo de la foto ya estaba que contribuia en 2 sitios, lo que no se es si tengo que marcar la casilla de “ver perfil como PROPIETARIO O PUBLICO” , Míralo ptra vez si no te importa a ver si está bien. Con lo otro me meto ahora.
    Saludos,
    Manuel

  18. Imagen de AnthonyAnthony el dijo:

    Tengo un par de problemas, Cambie los Estilos, pero sigue Igual, no hay ningun cambio. Tambien le cambie el Texto de “Anterior” y Siguiente” a Ingles (Previous y Next), pero sigue en Español, no entiendo por que a pesar de cambiar el texto y los estilos, todo eso sigue Igual.

    Ahh y otra cosa, no quiero que aparezcan el total de Paginas que hay en mi blog (12), quiero quitar eso, pero no se como, ayuda por favorrrrrrrrrrrrrrrrrrrr

  19. Imagen de Oscar el dijo:

    Emilio, si tengo más de 1000 páginas… ¿porque me indica que solo hay 72? He probado a cambiar parámetros o usar el código de otros y nada, con tu script de 72 no me pasa.

    • Imagen de Oscar el dijo:

      Edito: Sólo sucede en la página principal, he mirado en las etiquetas y lleva hasta la última publicada…

      ¿Alguna idea de que puede ser? He probado en vez de summary – default,, etc y nada.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Ese es un problema de los feeds de blogger, y una de las razones por las que blogger debería de implementar una paginación por su cuenta.

      Sintiéndolo mucho, blogger tiene un límite de entradas a mostrar en una llamada a su feed (500), por lo que al buscar todas para contarlas me sale un número mucho menor que el número de entradas real.

  20. Imagen de OscarOscar el dijo:

    Gracias por la respuesta Emilio, ya me dí cuenta leyendo en foros extranjeros de ese problema… Tengo otra cuestión por si sabes si es posible solucionarla en blogger… ¿Es posible quitar todos los “imageanchor” y “border” mediante jquery o javascritp que se ponen automáticamente en las entradas al subir imágenes? Ya que es imposible ir una a una cuando son demasiadas… Te pongo un ejemplo práctico:

    <a href="http://xxxxxxxxxxxxxxxxx/xxxx/xx/xxxxxxxxxxxxxxxxxxx.html&quot; imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://xxxxxxxxxxxxxxxxxxxxxx.jpg” height=”240″ width=”400″ alt=”xxxxxx”>

    He intentando con varios scripts para validar completamente la web en HTML5 en W3C, pero esos no consigo eliminarlos … Gracias de antemano!

  21. Imagen de María de las Mercedes el dijo:

    Hola! Me pasa lo siguiente….en mi blog, tuve que cambiar el sistema de comentarios anidados por el antiguo ya que como es una plantilla personalizada, de un día para el otro no podía ver más que 200 comentarios en una página, no había solución de ningún tipo, y ahora me encuentro con el viejo sistema de comentarios, que quiero darles cierta personalidad pero no encuentro nada….probé algunos pero como son del nuevo sistema, no me quedan bien y mucho no entiendo sobre el tema. Me gustaría cambiar la paginación que aparece, que es muy simple, y darle un estilo más agradable, para después ir con el estilo de los comentarios que si entrás acá http://asesoramientoconsorcios.blogspot.com.ar/p/libro-de-visitas.html realmente da pena!!! Espero me puedas ayudar!!! Saludos!!!!

  22. Imagen de ronald el dijo:

    hola emilio muchas gracias pro el tutorial crei haberlo implementado bien en este blog
    http://peliculas.hdgratis.tv/
    pero noto que no me crea mas de 16 paginas a pesar de que aun hay mucho mas contenido para mostrar
    si voy a la pagina 16 que supuesta mente es la ultima noto de que aun falta muchas mas entradas por mostrar pero solo muestra hasta la pagina 16 de casualidad podrias mirarlo por favor

  23. Imagen de cristina el dijo:

    Hola Emiliio. Primero de todo felicitarte por tus conocimintos, de verdad. Estoy segura que voy a utilizar más codigo del tuyo. Tengo una pregunta un poco tonta pero no veo que se especifique y con mis conocimientos no estoy segura.
    La duda es donde colocar el codigo de las opciones y el css, tambien tienen que ir antes de ?
    Tengo claro que antes de tiene que ir el codigo actualizado de XML BLOGGER pero a continuación tambien el de Opciones y CSS? O donde debe de ir este codigo?
    Gracias, espero tu respuesta porque ya llevo tiempo con este tema de la paginacion y tu diseño es el que me ha gustado más!
    http://www.LaNostraVolta.com

  24. Imagen de cristina el dijo:

    Hola Emilio de nuevo! Como te dije conseguí insertar el codigo correctamente pero… llevo varias horas para intentar que me aparezca el total de las paginas pero no hay manera. Se donde debe ir en la parte del css pero no entiendo porque no me sale… Por favor, hechame una mano! no se mas que probar!
    A la espera de tu ayuda recibe un saludo!

  25. Imagen de cristina el dijo:

    Hola Emilio,
    Sé que todo se reduce en añadir {{total}} pero no hay manera… Yo escribo esto:
    htmlBefore: ”,
    //Lo mismo pero para después. recuerda cerrar todas las etiquetas abiertas
    htmlAfter: “{{total}}”,”
    };

    Me podrias indicar cómo lo deberia escribir? (el resto del codigo es identico al que indicaste, no he cambiado nada).
    Muchíssimas gracias!

  26. Imagen de cristina el dijo:

    No me puedes decir el codigo para que salga el total con el mismo estilo??? de verdad que lo estoy probandon y no lo consigo… no quiero buscar otro codigo para otra paginacion… tu diseño me gusta pero necesito el total…

    Mil gracias emilio!!!

  27. Imagen de LorenzoLorenzo el dijo:

    Hola Emilio, tengo un blog con 1500 entradas y la paginacion que tengo ahora solo me muestra 500 entradas, quisiera saber si tu script de paginacion sirve para un blog con 1500 entradas.

    Y si no sera que podras hacer uno que sirva para un blog con mas de 2000 entradas, o me podras decir donde encuentro uno, muchas gracias.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Hola Lorenzo:

      En su momento esto estaba limitado por la cantidad máxima de entradas que te daba blogger, que era 500.
      No se si ha cambiado… Si lo ha hecho sí, pero si no me temo que te va a ser imposible paginar tu blog :/

      Un saludo: Emilio Cobos Álvarez

  28. Mes nuevo, ¡imagen nueva! | WordPress
  29. Imagen de Basilio RomeroBasilio Romero el dijo:

    Muy buenas Emilio.
    Muchas gracias por este tutorial. Después de buscar y buscar en infinidad de sitios, tu sistema de paginación ha sido el único que me ha servido. Aunque quiero personalizarlo un poco a mi gusto, pero me he topado con un problema. Resulta que quiero dejar solamente los botones de numeración. Sería posible eliminar los botones de “Anterior”, “Siguiente” y los otros dos de “ir a la primera” y la “última página”? He conseguido “ocultar” estos dos últimos, pero no funciona del todo bien, por lo que sería mejor eliminarlos, si es posible…
    Gracias, espero tener suerte porque me estoy volviendo loco con este tema.
    Un Saludo…

  30. Imagen de Basilio Romero el dijo:

    Hola Emilio.
    Te adjunto la URL de mi sitio. Es una plantilla que he modificado de tal manera que ni la misma persona que la ha diseñado podría reconocerla ahora mismo. Como puedes ver el sistema de paginación también lo he personalizado por completo con CSS, pero si te fijas, como te explicaba antes al ocultar los botones de “ir a la primera” y la “última página” el primer botón “1” desaparece en la página principal. La idea sería eliminar esos cuatro botones…
    Un saludo.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Hola Basilio.

      En principio no es posible eliminar directamente esos botones (mea culpa, porque es un caso de uso más que válido, aunque hay que tener en cuenta que esto lo programé hace ni se sabe). Modificar el script es relativamente fácil, aunque me lleva algo de tiempo.

      No obstante hay una solución más fácil a tu problema, y es ocultar el primer link y el último salvo cuando está activo. En tu caso bastaría con añadir el CSS:

      
      .grupo-botones .boton.activo {
          display: inline-block;
          visibility: visible;
      }
      

      Espero que te sirva, un saludo :)

  31. Imagen de Basilio Romero el dijo:

    Hola Emilio, pues me ha funcionado de maravilla, muchas gracias.
    Sobre los links de anterior y siguiente no estaría mal tenerlos ocultados, pero tampoco es un gran problema, al fin y al cabo me podrán servir más adelante cuando tenga más cantidad de páginas que mostrar.
    Otra cosa, y perdona tanta molestia. Cuando voy navegando por las etiquetas, por ponerte un ejemplo la de “trash reviews” que es una de las que más entradas tiene, todo funciona perfectamente, pero al volver hacia atrás, en la primera página me aparecen más entradas de las que tengo configuradas, que en mi caso son 16.
    Un saludo y muchas gracias por todo Emilio…

  32. Imagen de RicardoRicardo el dijo:

    Buenos dias tengo el mismo problema que te menciono Ronald este: noto que no me crea mas de 16 paginas a pesar de que aun hay mucho mas contenido para mostrar
    si voy a la pagina 16 que supuesta mente es la ultima noto de que aun falta muchas mas entradas por mostrar pero solo muestra hasta la pagina 16…
    En mi caso solo aparece hasta un máximo de 7 siendo que tengo entradas como para 15 paginas o mas y tengo bien configurado todo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.