Numerar páginas en Blogger. (Admite mas de 500 entradas)

Solucionado el problema del anterior código de paginación, que solo mostraba las ultimas 500 entradas.

El código fue creado por Abu Farhan

Yo le he hecho algunas mejoras al código, separando las clases para un mejor diseño personalizado, traducirlo al español, solucione unos errores que encontré y le agregué un botón para ir a la página principal, que solo se ve cuando navegamos por las etiquetas o label.

Consejo: Antes de hacer algún cambio, respaldar la plantilla.

Es muy sencillo aplicarlo, solo en 3 pasos.

Paso 1: (Insertar código JavaScript)

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.

Buscar bien abajo: </body> (Ctrl+F o F3)

Y justo arriba poner el siguiente código:

<!-- Paginación - Vku - http://loseasi.blogspot.com -->
<script type='text/javascript'>
//<![CDATA[
var postperpage=10;
var numshowpage=4;
var total_pag='Página:';
var upPageWord ='&#171; Anterior';
var downPageWord ='Siguiente &#187;';
var img_paginicio='https://.........    IMAGEN   16 x 16           ..../casita.png';
var widget_pag='Agrégalo a tu blog';
//]]>
</script>
<script src='https://dl.dropbox.com/u/19457418/paginacion/paginacion-vku-min.js' type='text/javascript'/>
<!-- Paginación fin -->

El archivo JavaScript lo pueden descargar y subirlo a su propio servidor.

Esta comprimido para mayor rapidez de carga.

Hacer los siguientes cambios:

var postperpage=10;: Números de entradas mostradas por página. ( IMPORTANTE!! tiene que ser la misma configurada en el blog, la que muestra la cantidad de entradas por página )

var numshowpage=4;: Números de cuadraditos que se mostrán por delante y detrás de la página activa.

var total_pag='Página:';: Texto.

var upPageWord ='&#171; Anterior';: Texto del botón de las páginas anteriores.

var downPageWord ='Siguiente &#187;';: Texto del botón de las páginas siguientes.

Acá cambiar el link de la imagen (casita). Tamaño recomendado 16 x 16.

var img_paginicio='https://.........    IMAGEN   16 x 16           ..../casita.png';: Imagen (casita), para ir a la página principal, que solo se ve cuando navegamos por las etiquetas o label.

var widget_pag='Agrégalo a tu blog';: Texto de Widget.

Paso 2: (Cambiar código para Etiquetas o Label)

Buscar (Ctrl+F o F3) el siguiente código:

'data:label.url'

Cambiar por este otro:

'data:label.url + &quot;?&amp;max-results=10&quot;'

El cambio se tiene que hacer en todas las coincidencias que encuentren.

En mi plantilla encontré 3 coincidencias, pueden ser mas.

Tener en cuenta el número de entradas, en el ejemplo yo puse 10.

Cambiar por el que configurarón antes. (Ver primera imagen)

Paso 3: (Insertar código CSS)

Vamos mas arriba de la plantilla y buscamos (Ctrl+F o F3): ]]></b:skin>

Justo arriba poner el siguiente código:

/* Números páginas */
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Página x de x*/
.showpageTotal {
margin:0 8px 0 0;
}
/* Casita en label */
.showpageInicio a:hover {
border:1px solid #888;
background: #ccc;
}
.showpageInicio a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
/* Página actual marcada*/
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
/* Anterior - Siguiente */
.showpageAS a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageAS a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Widget creador */
.showpageWidget{
font-size: 10px;
float: right;
margin: 10px 10px 0 300px;
}

Adaptar los códigos para el diseño de su blog, cambiar los colores. (Tabla de colores)

a:hover es cuando pasamos el cursor por encima.

En la siguiente imagen van a ver a que pertenecen las distintas clases:

Ya hechos los cambios hacer vista previa, y si todo esta bien, Guardar.

El ejemplo lo pueden ver en mi blog.

Van a ver un link el cual dice: Agrégalo a tu blog
Si pueden dejarlo mejor, como reconocimiento a mi trabajo.
Gracias.
Pero, si deciden quitarlo, solo agregar: display:none; a la clase .showpageWidget