Paginador de post en Blogger

La barra de navegación de Blogger es uno de los elementos más esenciales en este sistema de blogs que nunca hemos tenido la oportunidad de probarla nativamente, porque parece ser todo un "logro tecnológico" -aunque más bien es una cuestión de patentes por la interfaz de Wordpress, como ocurre con su calendario- y por desgracia o fortuna, solamente mediante un Script de terceros podremos implementarla.

Con este Script que a continuación veremos implementaremos la paginación de post en Blogger, aunque se deben tener en cuenta unos problemas relacionados al mismo:

Entre sus defectos es la forma poco eficiente en que se carga por los calculos que tienen que hacer al vuelo, llegando a retrasar otros scripts -por ejemplo aquellos de publicidad como Adsense-.
Al tardar en cargarse al ubicarse antes de la tag </body> la página muestra los vínculos; Anterior, Principal y Siguiente, algo que se ve bastante amateur.

Como sea, podremos mejorar levemente su desempeño simplemente cambiando la localización del Script.

Primero nada vamos al apartado Diseño de nuestro sitio y en Edición de HTML marcamos la casilla Expandir plantillas de artilugios y buscamos el código ]]></b:skin> justa antes del mismo pegamos:

/* Inicio de Paginador artificial de blogger */

#blog-pager
{
padding:6px 0px;

}
.showpageArea{
float:left
}
.showpageOf
{
margin:0 8px 0 0;
padding:3px 7px;
color:#fff; /* Color del texto */
font:15px Arial,Verdana;
background:#434F5B; /* Color del cuadro Página "n" de "x" */
}
.showpagePoint
{
color:#fff; /* Color del texto */
font:bold 15px Arial,Verdana;
padding:2px 7px;
margin:2px;
border:0px solid #fff;
background:#242424; /* Color que indica la página en la que te encuentras */
text-decoration:none
}
.showpageNum a
{
font:15px Arial,Verdana;padding:3px 7px;
margin:0 4px;
text-decoration:none;
background:#647586; /* Color del cuadro del vinculo activo */
color:#ffffff; /* Color del texto vínculo */
}
.showpageNum a:hover
{
color:#fff; /* Color del texto del vínculo al pasar el cursor encima */
background:#a92a07; /* Color del cuadro del vinculo al pasar el cursor encima */
}
.showpage a
{
font:15px Arial,Verdana;
padding:3px 7px;
margin:0 4px;
text-decoration:none;
background:#647586; /* Color del cuadro del vinculo activo "Anterior" */
color:#ffffff; /* Idem, lo mismo que en los anteriores ejemplos */
}
.showpage a:hover
{
color:#fff; /* Idem... */
background:#a92a07; /* Color del cuadro del vinculo "Anterior" al pasar el cursor encima */
}
.showpageArea
{
margin:10px 0;
font:15px Arial,Verdana;
color:#ffffff; /* Idem... */
}

/* Fin de paginador artificial de blogger */

En CSS /* comentario */ engloban un comentario, estos comentarios pueden removerse.

Ahora en el código buscamos <b:include name='nextprev'/> y justo después pegamos:

<!-- Paginador inicio -->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=3;
var upPageWord =&#39;Anterior&#39;;
var downPageWord =&#39;Siguiente&#39;;
</script>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Pagina|de|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))

//]]>
</script>
<!-- Paginador fin -->

Configurar el Script
En el Script tenemos dos valores
var postperpage=6;
var numshowpage=3;

El primero, Postperpage, es para configurar los artículos mostrados cuando pulsamos cualquier enlace de la barra de navegación o paginación configurado a 6 y el segundo, Numshowpage, es para controlar el número de cuadros numerado que aparecen en la barra, por defecto configurado a 3.

El paginador no se mostrará en Archivo, Páginas estática y las páginas individuales o Post.


Advertencia importante
Debe ajustar el numero de artículos que se muestran en Blogger al numero de postperpages, esto lo hace al ir a Configuración - Formato y en Mostrar un máximo de, elija un numero equivalente al puesto en el Script o muchas entradas no se mostrarán en los resultados, en este caso 6.

Conclusión
Así que, cuando lo ponemos justo después de <b:include name='nextprev'/> se carga más rápidamente, aún así, recuerden que en el caso de sitios grandes se debe limitar el número artículos que aparecen al mismo tiempo en nuestro blog, mi recomendación es de entre 4 a 6 artículos -si tiene más de 2000 artículos entre 4 y 5-, ya se explicó aquí como hacerlo, eso hará que se inicie más rápido este Script.

La primera vez que lo quité fue por la ralentización de la carga de toda la web, aunque he reducido el problema al optimizar el código de la plantilla, pero hay de caso a casos, así que tampoco es la solución definitiva.