Mil Trucos Blogger

Otro metodo de Paginación en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hace unos dias mostraba como poner la famosa paginacion en Blogger,aunque la anterior forma de paginacion tambien es buena yo uso y recomiendo la que os traigo hoy porque es mas completa.

La paginacion se ve de la siguiente manera:


Pasos

1. Vas a Diseño,Elementos de pagina,Añadir gadget,HTML Javascript y pegas el siguiente codigo:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
 color: #000000;font-weight:normal;
 padding: 3px 6px !important;
 padding: 1px 4px ;margin:0px 4px;
 text-decoration: none;
}
.showpageArea a:hover { 
 font-size:11px; 
 border: 1px solid #333;
 color: #000000;
 background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
 color: #000000;font-weight:normal;
 padding: 3px 6px !important;
 padding: 1px 4px ;margin:0px 4px;
 text-decoration: none;
}
.showpageNum a:hover {
 font-size:11px; 
 border: 1px solid #333;
 color: #000000;
 background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
 padding: 2px 4px 2px 4px; 
 margin: 2px;
 font-weight: bold;
 border: 1px solid #333;
 color: #fff;
 background-color: #000000;
}
.showpage a:hover {font-size:11px; 
 border: 1px solid #333;
 color: #000000;
 background-color: #FFFFFF;
} 
.showpageNum a:link,.showpage a:link {
    font-size:11px;
 padding: 2px 4px 2px 4px; 
 margin: 2px;
 text-decoration: none;
 border: 1px solid #0066cc;
 color: #0066cc;
 background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px; 
 border: 1px solid #333;
 color: #000000;
 background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount=10; 
var displayPageNum=3; 
var firstPageWord = 'Inicio';
var endPageWord = 'Última página';
var upPageWord ='Anterior';
var downPageWord ='Siguiente'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=''){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){               if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum;    } postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; }                }        } }//end if(post.category){ itemCount++; } }else{ 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+'T00%3A00%3A00%2B08%3A00&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){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +'</a></span>';            }else{ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>'; } }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>'; }else{ if(p==0){ if(isLablePage){ html = labelHtml+'1</a></span>';   }else{ 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"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } }//end  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' '; }else{ html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>'; } if(postNum==1) postNum++;  html += '</div>'; if(isPage || isFirstPage || isLablePage){ 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; } } } </script> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

2. Guardas los cambios.Por ultimo ubicas el gadget debajo de la zona “Entradas” guardas y listo.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

23 Comentarios

  1. Anonymous Anonymous
    mayo 18, 2011    

    no te lo recomiendo! 🙁 ya lo use

  2. mayo 19, 2011    

    @Anónimo Pues yo lo uso actualmente y es bueno 😉

    • noviembre 13, 2012    

      amigo que plantilla se presta mas para colocar la paginacion en Blogger grasias por tu tiempo

  3. junio 28, 2011    

    porque no me aparecen todas las paginas que tengo en mi blog cuando pongo la paginacion?

  4. junio 28, 2011    

    @Rolando Utiliza el otro metodo de paginacion que pongo al principio de la entrada ese es mucho mas confiable.

  5. julio 24, 2011    

    No me sale cuando lo pongo solo me aparece un blano 😐 Iwual a los que les sirvieron tuvieron suerte estoi buscando eso desde mucho n.n

  6. julio 24, 2011    

    @Sumomo Este metodo de paginacion es muy bueno,es raro que no te funcione,pero te recomiendo que uses el otro metodo de paginacion que puse en mi blog :))

  7. Ai Ai
    julio 24, 2011    

    :O Esta genial muchas gracias ^^

  8. julio 25, 2011    

    @Ai Que bien que si te haya servido =))

  9. agosto 30, 2011    

    muy bueno, me funcionó a la perfeccion

  10. agosto 30, 2011    

    Shiquita que bueno que te haya funcionado,gracias por comentar 😉

  11. Gmo Gmo
    septiembre 5, 2011    

    Muchísimas Gracias por el truco, me salió de maravilla: http://cinemuch.blogspot.com/
    Por cierto excelente tu página, sigue asi 😉

  12. septiembre 5, 2011    

    Gmo gracias por comentar y bueno que bien que te haya funcionado el truco..

  13. septiembre 29, 2011    

    Muchas gracias ya tenia un gadget similar pero no me convencia, ahora este es de lo mejor, gracias.

  14. septiembre 29, 2011    

    Fherguzon Fletcher la verdad que es muy bueno,Saludos compañero..

  15. octubre 16, 2011    

    como lo forzo los enlaces a abrirse en la misma ventana? me cambia de pestaña/ventana al darle click a las paginas. Otra cosa, los enlaces de las paginas ya visitadas se ponen un cuadro negro. ¿alguna modificación que hacerle al código??

  16. octubre 16, 2011    

    jonathan[i2000] como asi no te entiendo? :crying:

  17. octubre 16, 2011    

    utilizo el mismo método pero todos mis enlaces se abren en otra pestaña a excepcion de los que yo elija. target’_parent’ coloco entre <a y href para que se abran en la misma. Dentro del código del widget no sé donde colocar target’_parent’. No sé en cual <a href ira.

  18. octubre 16, 2011    

    jonathan[i2000] este truco solo es compatible con ciertas plantilla y con lo de los enlaces ya viene por defecto en el script 🙁

  19. abril 3, 2012    

    está muy bien yo le he probado ,pero lo que pasa que no le pega a mi diseño, por eso lo he quitado pero esta bien

    • abril 4, 2012    

      dragon esto va en gustos y como dicen entre gustos no hay disgustos 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo