Sistema de paginación para blogger

Las paginaciones en blogger ayudan a la experiencia de los lectores dentro de determinado sitio, más aun si este contiene una gran cantidad de publicaciones, la navegación se hace más cómoda y más ordenada.
Las ventajas son evidentes a la hora de aplicarlo, el Script que usaremos es bastante liviano apenas 4kb y está basado en Json, este hará la función de leer los feeds de nuestro sitio para hacer la ordenación y el sistema de paginación.

Para aplícalo lo que haremos es desgargar este pequeño archivo lo copiamos y vamos a la plantilla a ubicar esta línea </body>, y justo arriba lo pegamos.
Una vez hecho esto guardamos la plantilla y nos dirigimos a diseño y agregamos un HTML-JavaScript en el cual pegaremos el siguiente cogido que contiene los estilos de la paginación, y los ajustes, es recomendable ubicarlo luego debajo de las entradas.

<style type="text/css">.blog-pager,#blog-pager{
clear:both;
font-family:'century gothic', Arial, Verdana, Helvetica;
font-size:15px;
padding-top: 5px;
margin-left: 0px;
}
.showpageNum,.showpage,.showpagePoint{
margin: 2px;
}
.showpageNum a,.showpage a {
border: 1px solid #306eb3;
background-color: #4a4a4d;
background-image: -moz-linear-gradient(#4a4a4d, #2a272b);
background-image: -webkit-gradient(linear, left top, left bottom, from(#4a4a4d), to(#2a272b));
background-image: -webkit-linear-gradient(#4a4a4d, #2a272b);
background-image: -o-linear-gradient(#4a4a4d, #2a272b);
background-image: -ms-linear-gradient(#4a4a4d, #2a272b);
background-image: linear-gradient(#4a4a4d, #2a272b);
margin:0px 1px 0 1px;
padding:3px 8px;
text-decoration:none;
color:#ffffff;
line-height: 14px;
cursor: pointer;
white-space: nowrap;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 -1px 0 #000;
}
.showpageNum a:hover,.showpage a:hover {
background-color: #4a4a4d;
background-image: -moz-linear-gradient(#2a272b, #4a4a4d);
background-image: -webkit-gradient(linear, left top, left bottom, from(#2a272b), to(#4a4a4d));
background-image: -webkit-linear-gradient(#2a272b, #4a4a4d);
background-image: -o-linear-gradient(#2a272b, #4a4a4d);
background-image: -ms-linear-gradient(#2a272b, #4a4a4d);
background-image: linear-gradient(#2a272b, #4a4a4d);
border:1px solid #242d3f;
color:#2b71f1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-decoration:none;
text-shadow: 0 -1px 0 #000;
}
.showpageOf{
display: none;
}
.showpagePoint {
background: #3b77f2;
margin:0 3px 0 3px;
padding:3px 8px;
line-height:14px;
cursor:pointer;
white-space:nowrap;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
border:1px solid #4a464b;
color:#ffffff;
text-decoration:none;
text-shadow: 0 -1px 0 #000;
}
</style>
<script style='text/javascript'>
var numshowpage=5;
var postperpage ='6';
var upPageWord="«";
var downPageWord="»";
var home_page="/";
var urlactivepage=location.href;
</script>

Ajustes:
var numshowpage=5;
Es la cantidad de páginas que mostrará la numeración.
var postperpage ='6';
Es la cantidad entradas que se mostrará en cada página (importante debe ser la misma cantidad que se establezca en los ajustes del blog, en cuanto a la cantidad de entradas a mostrar en el home)
var upPageWord="«";
Flechas de navegación, esto pueden cambiarlo si gustan por algo de su preferencia.
var downPageWord="»";
Con esto ya tenemos nuestro sistema de paginación en Blogger, más fácil imposible.