Seis Estilos de Paginación para Blogger con CSS


Navegando en el blog de Abu-farhan encuentro seis estilos de barra de navegación para blogger, estos 6 estilos los podemos disfrutar a gracias a Choen.

A sí que si estabas pensando poner una barra de paginación en tu blog pero el color de la paginación no se ajustaba a tu gusto, puedes escoger entre estos 6 estilos  de paginación que bienen en distintos colores, escoge el que más te guste. El color de los estilos es el mismo que pueden ver en la imagen de arriba.

Primero ve a Diseño > Añadir un gadget > elije HTML/Javascript, copia y pega el siguiente código:

<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=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script><script style='text/javascript' src='http://dl.dropbox.com/u/3373498/PazosBlogger-blogger-page-nav-v2.js.txt'></script>

Has click en guardar y situa el Elemento debajo de todas las entradas.

Ahora tienes que copiar el código CSS para darle estilo, y lo ponen en su plantilla antes de ]]></b:skin> . Se los dejo enumerados del 1 al 6 en orden como están en la imagen de arriba:

1. Estilo 1
2. Estilo 2 
3. Estilo 3 
4. Estilo 4 
5. Estilo 5 
6. Estilo 6

Como pueden ver son seis estilos muy bonitos que pueden añadirlos en sus blogs.
Vía | Abu-farhan

9 comentarios:

Omar el 10 de abril de 2010, 12:36 dijo...

Gracias me quedo muy elegantioso :P

Robinson Char el 11 de abril de 2010, 11:27 dijo...

Excelente truco. Pero tengo un problema: coloqué el código en mi blog, pero cuando empiezo a recorrer las paginas, se van corriendo los números, es decir, en la pagina principal aparece las 6 primeras entradas, pero a medida que voy avanzando se va incrementando el menú hasta desordenarse. Te dejo mi blog para que lo revises y si me puedes ayudar.
Gracias.
www.robinsonchar.blogspot.com

Administrador el 12 de abril de 2010, 3:58 dijo...

Hola Robinson Charjuelán, la verdad es que es un poco raro, veré cual es el problema si lo soluciono te aviso. También puedes probar con esté otro estilo de paginación.

Saludos!

El salvador en 360° el 28 de abril de 2010, 9:28 dijo...

hola Eduardo Sanguino tengo un problema que no logro solucionar, te apreciaria tu ayuda..mi blog cuando empieza a cargar al principio me muestra el enlace de entrada antigua pero luego los oculta!..y lo raro es que ya revise todos los codigos y aparentemente estan todos correctos..pero bueno entonces intente ponerle un estilo de paginacion y si funciona al principio pero luego tambien los oculta!!..la verdad no se que es..si puedes ayudarme te lo agradecere muchisimo; mi blog es http://elsalvadoren360.blogspot.com/

Administrador el 30 de abril de 2010, 14:31 dijo...

Hola El salvador en 360°, sigue estos dos tutoriales para recuperar los enlaces de navegación evidentemente si no haz borrado el código que pertenece a ellos, intenta primero con este tutorial1 si continua el problema sigue con este otro tutorial2 que pertenece a Rosa del Escaparte, con esto tienen que verse perfectamente los enlaces de navegación.

Saludos!

Norberto Briones el 18 de noviembre de 2010, 10:39 dijo...

Hola, ocupo hace mucho esta paginación y anda bien. Quisiera saber si puede subir para descargar el script js, pues dropbox se cuelga constantemente y, en consecuencia, se cae la paginación.

Administrador el 19 de noviembre de 2010, 4:04 dijo...

Hola Norberto Briones, puedes descargar el script aquí y puedes crearte una cuenta en Google Code y sube el script, y no tendrás más problema.

Saludos!

Hans Aguirre el 17 de julio de 2011, 11:08 dijo...

Hola, primero gracias por el código pero tengo un problema con mi web, ingreso los códigos como indicas pero no me aparece la paginación. Me podrías decir cual es el error?
Te dejo mi web para que lo revises:
http://cybergustos.blogspot.com

Gracias!!!!

Anónimo dijo...

genial amigo.. pero como hago para el Siguiente y pagnas (#) tambien tengan el cuadrado???

Quieres Comentar

Todos los comentarios están siendo leídos y moderados.

- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible

¿NO PUEDES COMENTAR?

¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!

NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS

jueves, 28 de enero de 2010

 

Ayuda para blog - Pazos Blogger Copyright 2010 | Template por:Brian Gardner | A Blogger por: Bloganol | Modificado y Diseñado por:Eduardo Sanguino