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