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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

1 comentarios:

  1. de lujo!!! es justo lo que iva buscando muchisimas gracias!!!!

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com