Enumera las páginas de tu blog

¡Hola bellas! No se si muchos lo hayan notado pero hace unos días puse en el blog un script que permite que las páginas se vean numeradas... hoy les explicaré como poner en sus blogs :)

Hace mucho que quería saber como lograrlo y al final lo encontré, casi por casualidad. Hoy les explico como ponerlo en sus blogs :)

Antes que nada decir que el código base lo saqué de este blog, yo simplemente lo modifique un poco y se los traducí al español puesto que estaba en portugués. Ahora sí, empecemos.

1. Vamos a la pestaña Plantilla - Editar HTML.

2. Abrimos el buscador (CTRL+F) y ponemos </body> y por encima de ello pegamos esto:

<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

Nota: dónde pone pageCount=5 tienen que cambiar el 5 (según entendí) por la cantidad de entradas que ustedes tienen configurado para que se vean por página. 

Para saber cuantas entradas se te publican por página, puedes ir a Diseño y 'editar' el gadget 'Entradas del blog', es lo primero que sale. O también pueden dejar 5 como estan aquí en el código y cambiar la configuración de sus entradas.

3. Ahora toca el turno de buscar ]]></b:skin> y por encima pegamos esto:

/* PageNav --------------------------- */
.showpageArea {
font-family: Trebuchet MS;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a { /* Links 'próxima' y 'anterior' */
padding: 3px 8px; /* Márgenes, si lo aumentas el cuadrito se verá más grande */
margin: 2px;
color:#777; /* Color de la fuente */
border:1px solid #ccc; /* Borde */
background: #eee; /* Fondo */
}
.showpageNum a { /* Números */
padding: 3px 8px; /* Márgenes, si lo aumentas el cuadrito se verá más grande */
margin:0 4px;
border:1px solid #999; /* Borde */
background: #ddd ; /* Color de fondo */
}
.showpageNum a:hover { /* Números al estar seleccionados*/
border:1px solid #888; /* Borde */
background: #ccc; /* Fondo */
}
.showpageOf {
margin:0 8px 0 0;
}
.showpagePoint { /* Números al hacer clic*/
padding: 3px 8px; /* Márgenes, si lo aumentas el cuadrito se verá más grande */
margin: 2px;
border:1px solid #999; /* Borde */
background: #666; /* Fondo */
color:#fff; /* Color de la fuente */
}

Y bueno ahí yo puse que es cada cosa para que ustedes lo modifiquen con los colores de su gusto.

Eso sería todo... espero que les guste tanto como a mí! Cualquier duda o pregunta, pueden dejar un comentario :) Un besito.

Créditos {x}