lunes, 11 de abril de 2011

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.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

1 comentarios:

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.