/* ANUNCIO4 */

Paginación para Blogger Configurable

A petición de Rosa en la sección de este blog: Tus Consultas y Pedidos!, hoy compartiré un pequeño truco basado en Javascript con estilos CSS, este truco remplaza Entradas antiguas, Entradas más recientes e Inicio por una paginación mucho mejor como en las paginas web profesionales, este truco no solo facilita la navegacion en el blog si no que también le da un toque de elegancia y profesionalismo al blog.

Comenzamos, ve a Diseño-> Edición de HTML y antes de </body> pega lo siguiente:
<!-- PAGE NAVIGATION START-->
<script type='text/javascript'>
var pageCount=7;
var displayPageNum=10;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #676767;background:#fff;border: 1px solid #b6b5b5;font-size: 15px;padding:4px 8px;margin:0 4px;" class="showpageOf"> Páginas '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #999;" class="showpageOf"> Páginas ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>
<!-- PAGE NAVIGATION STOP-->

Configuracion:
var pageCount= Indica el numero de entradas a mostrar en cada pagina.
var displayPageNum= Indica la cantidad máxima de números de paginación.

- Ahora pega lo siguiente antes de ]]></b:skin>
/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}
Guardar cambios y listo, tendrás el truco de paginación para Blogger.

8 comentarios:

Era lo que mne faltaba por aplicar, nuevamente gracias por tu ayuda :D

hola que tal porque al poner la paginacion solo me muestra 101 paginas si yo tengo mas tengo como 175,me podrias ayudar con eso,saludos.

igualmente era lo que buscaba =) gracias i like

Este comentario ha sido eliminado por el autor.

gracias por el truco, pero la paginación sale con un color celeste un tanto molesto, no con el diseño que tienes aquí arriba. Puedes verlo aqui http://www.literachicos.blogspot.com

Cómo hago para cambiarlo y que quede en gris??

Gracias

Mixus, me voy a tomar el atrevimiento de molestarte, ya que soy bastante malo en temas técnicos. Me gusta este artilugio de la paginación, pero tengo un problema con mi blog que no se como encarar. Mi blog, es de panadería y cuando lo armé, hice muchas páginas por tipos de productos, ejemplo Tortas, budines, etc. Entonces fui haciendo las publicaciones y luego en las páginas puse un enlace en la página correspondiente. Hace poco una página de análisis me tiro que posiblemente la página tenía muchos enlaces internos... Algo así como una endogamia jaja. Me gustaría modificar esto, pero no se bien como encarar el tema, porque tengo miedo que luego Google me tire muchos 404. Si la podes mirar, me gustaría que me aconsejaras que hacer y si es conveniente que ponga el artilugio de paginación. Desde ya muchas gracias. Te dejo la página: http://saperefareartesanal.blogspot.com Saludos y bueno, si se diera el caso que no puedes mirarla, yo de todas formas sabré entender. ¡Un abrazo!

Gracias por la ayuda, me resultó fácil de instalar y personalizar, además que funciona a la perfección..
Saludos

Despues de probarlo de mil sitios, cosas muy parecidas AL FIN ME HA FUNCIONADO. mil gracias!!!!

Publicar un comentario