Paginación para Blogger en solo dos pasos mucho mas facíl

Recorriendo un poco mi plantilla me llamo la atencion el codigo que tengo para la Paginación el cual se encuentra todo en la plantilla y es un poquito largo , pensandolo bien si quitaba el codigo javascripts y lo colocaba en un archivo .js obtendria mejor rapides al cargar,  todo en ves de colocarlo en la plantilla para mejorar la carga lo colocamos todo en un gadget los estilos y el archivo .js y así seria mucho mas facíl de personalizar ya no tendriamos que tocar nuestra plantilla para nada.



Para colocarlo de esta forma en nuestro sitio solo con añadir el codigo que les brindo a continuacion en un gadget es todo guardamos y listo, tendran su nueva paginacion en su blog.

El siguiente codigo es el que van a colocar en un gadget
<style type='text/css'>
#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {color:#ffffff;text-decoration:none;border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;margin:0 3px;padding:3px 7px;background-color:#222;}
.showpage a {color:#ffffff;text-decoration:none;border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;margin:0 3px;padding:3px 7px;background-color:#222;}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {color:#ffffff;border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;padding:3px 7px;background-color:#403f40;margin:0 3px;}
.showpageOf {color:#ffffff!important;border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;padding:3px 7px;background-color:#222;margin:0 3px 0 0;}
</style>
<script style='text/javascript'>
var numshowpage=4;
var postperpage =4;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='http://img84.xooimage.com/files/d/c/1/tubetrucospaginacionblogger-3495eea.js'></script>

 Los dos numeros 4 el primero son la cantidad  de numeros a mostrar en la paginacion.
el segundo 4 es la cantidad de entradas a mostrar .

Explicando los estilos

  .showpageNum a    ---- son los estilos de los numeros
  .showpage a           ----  son los estilos de las palabras Previous   ,  Next
  .showpageNum a:hover, .showpage a:hover,
  .showpagePoint     ----  es cuando pasas el mouse,raton por encima y cambia de color y deja fijo ese         color en el numero que te encuentres en el 1 o el 2 o el 3 etc........
 .showpageOf          ---- son los estilo de donde dice page 1 of  2.

Pueden ver un ejemplo en esta plantilla que estoy preparando para este blog

Votar esta anotación en Bitácoras.com
Compartir esta entrada :



data:newerPageTitle data:olderPageTitle data:homeMsg
:) :( ;) :D ;;-) :-/ :-O X( B-) #:-S :(( :)) =)) ~X( :-t 8- =P~ #-o =D7 :-SS :-q :-bd

3 comentarios:

  1. Excelente gadget, lo aplique en segundos y quedo muy bien.
    si queres verlo lo puse aca:
    http://autopartesdmw.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola ya vi que te quedo muy bien que bueno que te haya parecido excelente.saludos

      Eliminar
  2. lo he implementado y queda precioso!!!
    Muchisimas gracias por el aporte

    ResponderEliminar