Poner Paginación en Blogger de una Manera Fácil

Poner páginación en blogger es muy fácil, hora veremos cómo hacerlo, así que si tu blog aun no tiene unabarra de paginación y quieres agregar una, en este post veremos cómo podemos agregar dicha barra de una manera muy fácil y rápida. También les dejo otro artículo con 6 estilos de paginación para blogger.

Poner paginación en blogger fácil y rápido

El meto que usaremos es sencillo ya que sólo tenemos que agregar el código de estilo CSS en la plantilla, y añadir un gadget HTML/Javascript. Para ello tienes que seguir los 2 pasos siguientes:

1. Ve a Diseño > Edición de HTML > busca ]]></b:skin> justo antes pega el siguiente código:

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

Ahora ve a Diseño > Añadir gadget > elije HTML/Javascript 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:#d10000;}.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>

Una vez guardado el código muévelo debajo de las entradas.

Configuración:

var pageCount=5; (el código está predeterminado para mostrar 5 entradas por página, cambialo por el número que tu quieras, está en rojo en el código).
var displayPageNum = 5; (número de páginas en la lista, está en azúl).

También podemos cambiarle el color a la barra de navegación, combinándola con la plantilla que usemos. Les dejo un generador de códigos de colores. Imprimir artículo