23 diciembre 2009

Paginacion de paginas en Blogger

  9 comentarios
Tal vez algun dia habras observado un blog de Wordpress u otro servidor que tiene paginaciones automaticas y te preguntastes, "¿Por que blogger no tiene eso?", pues les tengo una excelente noticia, ya no lo haras mas por que ahora con tan solo un codigo podras hacerlo de un forma mas sencilla, cuando hablo de paginacion me refiero a esto:



Interesante ¿No lo crees?...


Ya no miraras con envidia a los otros blogs por no tener esto, y otra ventaja, es que podras quitarte de una vez por todas la molestia de los links que aparecen debajo de las post de blogger que dicen "Entradas antiguas y Pagina Principal", con esto podras organizar tu blogger y de una vez hacer que se vea mucho mas bonito, aqui les dejo el link chicos espero que lo difruten


Este codigo aparecen los botones de "Anterior", "Siguientes", "Ultima pagina", "Primera pagina" y una cantidad de tres botones numericos, si quieres saber como hacer para añadir mas numeros solo dejame un comentario.


Aqui el codigo.


Lo primero que debes hacer es crear en la zonas de Widgets uno nuevo tipo HTML/JavaScript, copias el codigo, lo guardas y luego desplazas el wigdet hasta la zona debajo de donde dice "Entradas de Blog", de otro modo, te aparecera en la zona de widgets...

<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 2px;
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 2px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpagePoint {font-size:10px;
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=5;
var displayPageNum=2;
var firstPageWord = 'Primera';
var endPageWord = 'Última';
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 += ' <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="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" 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>



Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


9 comentarios :

  1. Bastante interesante esta aplicación. Mi pregunta sería, ¿Se le podría cambiar los colores con facilidad?
    Saludos

    ResponderEliminar
  2. Que tal amigo, veo que te unistes, que bueno. Mira en el codigo, observa bien, todo lo que diga algo asi #seguidodeunnumero, es decir algo asi #000000 o #333 o #fffff, todo esos son los codigos de los colores, si quieres cambiarselos solo cambia el codigo por el color que desees, en esta pagina estan los codigos

    Codigos de colores

    si no aparece el que te gusta solo coloca en google tabla de codigo de colores y aparecen varios link, espero haberte ayudado. invita a tus amigos a que se unan

    ResponderEliminar
  3. oye LuDBaRRi quizas hicistes mal el procedimiento, acuerdate que si tuvieras una plantilla propria de blogger seria mas facil ya que las de btemplates traen algunas veces codigos que no permiten mostrar muchas veces lo que queremos agregar por que es necesario para el codigo de este recurso.. esta plantilla que tengo era propia de blogger y yo la modifique un poco y mira que linda quedo

    ResponderEliminar
  4. Siempre te leo, es muy didáctico. Creo que esta pagina es muy interesante, siempre la recomiendo.

    ResponderEliminar
  5. a mi si ke me va,me la primera vez no me funciono pero me di cuenta ke me faltaba copiar un una letra xDD,mi pregunta es...como añado mas paginas y como hago para numerar cuantos arxivos aparezcan en cada pagina? muxas gracias y ke sepas ke sois los nº 1!!!

    ResponderEliminar
  6. Gracias bro se ve genial vamos a implementarlo

    ResponderEliminar
  7. Como siempre, esta clase de datos no funcionan, por algo no la tiene aplicada a su propio blog, no sirve.

    ResponderEliminar
  8. no funciona :( tengo la plantilla travel

    ResponderEliminar