Paginacion es nuestro blog

Hoy vamos a ver como podemos paginar nuestra página.

Para ello vamos a usar un HTML/Javascrit.

 

Para ello nos vamos a:
Diseño > añadir un gadget.

En la ventana que nos aparece añadiremos el siguiente códido.

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">var pageCount=5;var displayPageNum=3;var upPageWord="Anteriores";var downPageWord="Siguientes";</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

Ahora para personalizarlo según nuestro estilo, vamos a cambiar algunos valores antes de gardarlo.

    var pageCount=5 : Número de entradas que se mostrarán en cada página
    var displayPageNum=3 : La cantidad de cuadraditos máxima que se mostrarán delante y detrás de la página activa
    var upPageWord="Anteriores" : Texto para el botón de las páginas previas
    var downPageWord="Siguientes" : Texto para el botón de las páginas siguientes

También podemos modificar toda la clase de las botoneras.

 

.showpageArea a : Contenedor general del artilugio. Enlace.
.showpageNum a : Cada uno de los botones, excepto la página activa. Enlace.
.showpageNum a:hover : Idem anterior. Enlace al pasar el puntero.
.showpagePoint : El botón de la página activa.
.showpageOf : Texto que muestra el total de páginas.
.showpage a : Botones de texto Anteriores/Siguientes. Enlace.
.showpage a:hover : Botones de texto Anteriores/Siguientes. Enlace al pasar el puntero.
.showpageNum a:link,.showpage a:link : Para no cambiar los enlaces visitados.

Para que sea efectivo este gadget hay que moverlo a la parte posterior de nuestras entradas para que empiece a funcionar.

 



 
Imprimir entrada