DISEÑO Y SERVICIO WEB, RECURSOS EN LINEA, TUTORIALES, PROGRAMAS Y MÁS...

miércoles, 17 de febrero de 2010

Paginá tu blog

Cuando uno empieza a tener muchas entradas en su blog se vuelve fundamental el organizar de forma clara y sencilla la información de un blog para una mejor navegación por parte de los lectores. Un elemento que colabora con esto es paginar el blog. Para los que no saben aún que es esto miren la imagen y se darán cuenta enseguida.


Como paginar tu blog


1. Primero inicias sesión en Blogger y luego vas a diseño-> edición de HTML
No olvidar descargar la plantilla como respaldo

2. Luego buscas la siguiente etiqueta en la plantilla


</body>


3. Inmediatamente después pega este código


<!--PAGINATION-STARTS-->

<script type='text/javascript'>

var pageCount=10;

var displayPageNum=3;

var upPageWord ='Anterior';

var downPageWord ='Siguiente';

</script>

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>

<!--PAGINATION-STOPS-->


var pageCount=10 es el número de entradas por página y se puede variar a conveniencia
var displayPageNum=3 es el número de páginas que se mostrarán en el botón


4. Ahora hay que darle formato, para eso hay que buscar la siguiente etiqueta


</head>
5. Antes de la etiqueta pegar el siguiente código


<!--PAGINATION-STARTS-->

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>

<style type='text/css'>

.showpage a:hover {

color: #FFFFFF;

background-color: #92416C;

}

// ESTILO DE  DEL SELECTOR

.showpagePoint {

color: #FFFFFF;

background: #92416C;

border: 1px solid #92416C;

}

// ESTILO DE LOS NÚMEROS

.showpageNum a:link,.showpage a:link {

color: #000000 !important;

background-color: #92416C;

border: 1px solid #92416C;

}

// ESTILO HOVER DE LOS NÚMEROS

.showpageNum a:hover {

color: #FFFFFF !important;

background: #92416C !important;

border: 1px solid #92416C;

}

// ESTILO DEL BOTÓN DE PREV Y NEXT

.showpageArea a {

border: 1px solid #92416C;

}

// ESTILO HOVER DE LOS BOTONES DE PREV Y NEXT

.showpageArea a:hover {

border: 1px solid #92416C;

color: #FFFFFF !important;

background: #92416C !important;

}

</style>

<!--PAGINATION-STOPS-http://bloggerstop.net-->


el número #92416C es el color de fondo de los recuadros en sistema hexadecimal y se puede cambiar y los mismo con el resto de los colores


7. Guardar los cambios

3 comentarios:

  1. Hola, que bueno que regresaron y con una entrada muy interesante. La voy a probar.
    He tenido algunos problemas con uno de mis blog, de hecho puedo verlos perfectos con Google Chrome o Internet explorer, pero no con Mozilla, estoy tratando de solucionarlo. Tienen alguna sugerencia?
    Saludos.

    ResponderEliminar
  2. Claudia Cuál de tus blogs es el que te causa problema?

    ResponderEliminar
  3. Hola hermoscarlos una duda como hacer que la gente que cuando se metan en mi blogger y este el enlace de tuenti me puedan agregar osea parecido al facebook =) hcaer un tutorial porfa muchas gracias :)

    ResponderEliminar