Agregar paginación en tu blog

¿Como agregar una paginación simple a tu blog?

Esta vez lo que les enseñare es como pasar de esto:

A algo como esto:

Esto lo vamos a lograr copiando el código que les muestro a continuación, en un Gadget debajo de nuestras entradas.

<style type='text/css'>
#blog-pager{height: 180px;
padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>


<script style='text/javascript'>var pageCount=8;
var displayPageNum=8;var upPageWord="Anterior";var downPageWord="Siguiente";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

var pageCount=8 : Número de entradas que se mostrarán en cada página (este numero debe ser igual a la cantidad de entradas que se muestran actualmente en una sola pagina de tu blog).

var displayPageNum=8 : La cantidad de cuadritos máxima que se mostrarán delante y detrás de la página activa.

var upPageWord="Anteriores" : Texto para el botón de las páginas previas.

var downPageWord="Siguientes" : Texto para el botón de las páginas siguientes.

Todas las demás opciones del código CSS las pueden modificar a su gusto para cambiar los colores, tamaño, etc.