Como poner un navegador numerado en Blogger

Este truco es muy bueno... Consiste en poner un Script en nuestro blog con el cual cambiaremos el navegador de post anteriores del blog, es decir, sustituiremos los links que dicen "Entradas antiguas" y "Entradas recientes" por un Navegador Numerado muchisimo mas comodo




Si instalas correctamente el Script veras al pie de tu blog un navegador como el de la imagen, despues lo unico que necesitarias hacer es una pequeña customizacion a tu plantilla para visualizarlo correctamente en las paginas de las Etiquetas o Labels

Pasos para instalar el Navegador


Lo primero que tienes que hacer es ir a tu panel de Blogger e irte a Diseño > Edicion HTML y darle click a Expandir plantillas de artilugios

Consejo antes de empezar: Recuerda siempre antes de modificar tu plantilla es recomendable guardarla para evitar desastres inesperados. Y para buscar codigos siempre recuerda utilizar el CTRL+F para facilitar tu tarea

1. Añadir el estilo CSS

Tienes que buscar el tag

]]></b:skin>

y arriba de el pegar el siguiente codigo

.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;
}


Este es el estilo CSS del navegador, si quisieras cambiar el estilo visual puedes hacerlo editando el CSS acorde a tu gusto

2. Poner el Script

Tienes que buscar el tag

</body>

y arriba de el pegar el siguiente codigo que he subido en un archivo .txt puedes abrirlo directamente o descargarlo, solo asegurate de copiar todo el codigo que esta en el archivo .txt

No te asustes si lo ves un poco grande

SCRIPT NAVEGADOR NUMERADO BLOGGER.TXT

En el Script hay dos atributos modificables:

var pageCount=5; este atributo sirve para determinar el numero de post visualizados por pagina.

var displayPageNum=5; este atributo determina los numeros adicionales del navegador en cada pagina.

Tambien puedes cambiar los atributos var upPageWord ='Anterior'; y var downPageWord ='Siguiente'; estos son simplemente el texto de los botones, puedes cambiarlos a tu gusto.

3. Hack para visualizar el navegador en los Labels

Para visualizar correctamente el navegador en las paginas de las etiquetas hay que hacer un pequeño hack:

Tienes que buscar en la plantilla cada ocurrencia del siguiente codigo

'data:label.url'

Y cambiarla por este codigo incluyendo las comillas

'data:label.url + "?&max-results=5"'

El 5 es el numero de post desplegados por pagina

4. Paso final

Lo ultimo es guardar los cambios en la plantilla y revisar los resultados.