Cómo numerar las páginas en Blogger (II)


Prácticamente en los inicios de este blog ya explicamos cómo numerar las páginas en Blogger, con ello conseguíamos un diseño elegante a la vez que profesional. Hoy vamos a explicar otra manera de paginar el blog, pero esta vez con un nuevo estilo que gracias a Abu-Farhan y al todopoderoso Javascript lograremos un bonito efecto con scroll.

paginar numerar blog blogger


El proceso de paginación en Blogger es muy sencillo y lo lograremos siguiendo los siguientes pasos:

1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "Expandir artilugios"
4) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
5) Antes de ]]></b:skin> pegaremos el siguiente código:

<!-- Paginar Blogger -->
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
<!-- Fin Paginar Blogger -->

6) Ahora buscamos </body>
7) Antes de </body> pegaremos el siguiente código:

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Observaciones:
var postperpage=7;   -> Indica el número de entradas por página.
var numshowpage=6;   -> Indica el número de páginas que se mostrarán en el scroll.

8) Por último buscamos 'data:label.url' y cada vez que lo encontremos lo encontremos lo sustituimos por 'data:label.url + &quot;?&amp;max-results=7&quot;' De esta forma estaremos editando la paginación en las etiquetas o categorías (labels).

Clicamos en vista previa y si todo está bien guardaremos nuestra plantilla. Recuerda que es recomendable guardar los scripts en tu PC o alojarlos en alguna página web que permita subir archivos javascript.

Ya está todo listo. Espero que te guste esta nueva forma de numerar las páginas en Blogger.

22 comentarios:

  1. hola.... saludos por seguir actualizando el blog... al conculir con el 8vo paso no encuentro ese codigo... ??? gracias

    ResponderEliminar
  2. Revísalo bien porque tiene que estar. ¿Marcaste la casilla expandir artilugios?

    Revísalo y me comentas. Saludos

    ResponderEliminar
    Respuestas
    1. para ver los codigos html debo de ir es a plantilla hay le doy luego le doy a ok y aparece todo hago todo lo que dices pero el 8vo paso no me aparecee has video :(

      Eliminar
  3. no salio! encima mi kilombo es que no me muestra las entradas antiguas!

    ResponderEliminar
  4. hola!!llevo un tiempo que puse esta numeración en mi blog y funcionaba de maravilla, pero de repente ha desaparecido de mi blog...he probado a ponerlo de nuevo, pero sigo sin resultados...por qué puede ser?

    ResponderEliminar
  5. Una pregunta he tratado una y otra vez esta forma para enumerarlas pero no funciono, encontre los codigos y los puse como dice aqui pero de una u otra forma no sale y trate en mas de un blog porque eran 2 blogs los que tenia que hacer esta numeracion y no funcionaba alguna ayuda

    ResponderEliminar
  6. y de donde quieres que descaguemos el scrip si ya lo borraste del servidor donde lo habias subido?

    ResponderEliminar
  7. una pregunta como hago para que mis otras publicaciones aparescan en el costado del blog como lo tuyo que esta en carpetitas?

    ResponderEliminar
  8. Estoy hace varios días tratando de pegar los códigos para poder numerar las páginas de mi blog, puedo hacerlo, pero no muestra la vista previa, envía dos mensajes de error. Cómo puedo subsanar este tema? Tengo un notebook Lenovo, con Windows Vista. Espero puedan ayudarme. Gracias

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. he seguido todos los pasos.
    Pero no en todas las secciones salen enumeradas, solo algunas.
    Ye te aseguro que lla he sustituido tdods los data:label.url

    Me puede ayudar??

    ResponderEliminar
  11. GRACIAS ME HA SERVIDO DE MUCHO YA TENGO MI BLOG CON PAGINAS NUMERADAS

    ResponderEliminar
  12. Saludos a todos, para los que no han podido poner este codigo, es importante que sepan que el host al que se subieron los script´s ya no existe
    les paso los otros, los encontre navegando en la red perdidos, asi que los subi...
    el primer script, osea la parte donde tienen que poner
    http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js
    esa direccion la cambian por esta.

    http://mihostparapruebas.site90.com/paginator3000gemablog.js


    y la segunda, donde dice
    http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js

    la cambian por esta..

    http://mihostparapruebas.site90.com/paginator_v2.js

    despues de esos pasos, seguro les jala, fue lo que yo e echo y se ve muy bien, saludos.

    ResponderEliminar
  13. Hola Como estas? Tengo la opcion Personalizar en vez de Diseño, puede ser?

    ResponderEliminar
  14. Ya no estan los Scripts porque mejor no lo subes a google sites y luego en archivos alli lo subes asi haslo men alli mas seguro que no te lo borren.
    Es sola una opinion.

    ResponderEliminar
  15. Hise algo mal. Yo puse todo lo que dijistes, pero ahora lo que pasa es que no me sale ni la numeracion ni Lo de entradas antigas, Principal y todo eso.. ahora no hay forma de pasar de PAGINA :(
    que hago? ayuda por favor :(

    ResponderEliminar
  16. gracias por el aporte brother.perro puse to2 como indica el tutorial y no se enumeraron.es decir no funciono

    ResponderEliminar
  17. Hola, disculpa no encontré: 'data:label.url'

    ¿Qué debo hacer entonces para que me funcione?

    Muchísimas gracias de antemano, espero tus respuestas con ansias.

    ResponderEliminar
  18. Hola lo intenté con la versión pasada y me funcionó, lo intenté con esta versión y no funcionó, me sigue mostrando Entradas antiguas, sabes que podrá ser?.
    Gracias por tus consejos, un saludo.

    ResponderEliminar
  19. Muchas gracias, a mi me ha funcionado a la perfeccion...muy bueno!

    gracias por colaborar y por traernos pequeños trucos que nos ayuda a mejorar nuestros blogs.

    Lo he implementado en mi blog, que os invito a que lo visitéis: http://dineroporcasa.blogspot.com.es/

    Lo estoy desarrollando en mis ratos libres...pero el objetivo es que sea útil a la gente

    ResponderEliminar
  20. No se si escribo bien esto en este sitio, pero por favor necesito ayuda

    tengo un blog de fotografia y todo lo que publico me sale en la primera pagina que es la de INICIO o PAGINA1 entonces tengo otras paginas y no consigo publicar ninguna entrada con sus fotos para que salgan de manera ordenada, veamos, pagina de inicio una breve presentacion del blog y el aviso legal, pagina dos sesiones fotograficas, books y retratos, pagina 3 fotografia aerea... y asi sucesivamente pero todas las publicaciones que hago salen solo en la principal, como hago para que salgan ordenadas?

    muchas gracias, un saludo y mi direccion de blog ignacionikon.blogspot.com.es

    ResponderEliminar