LINGUOCIO: PAGINACION PARA TU BLOG

Para poder dividir tu blog de una manera mas estética donde puedas enumerar cada grupo de entradas para que tus visitantes se sientan mas a gusto y vean un mayor orden debes utilizar algunos de los siguientes códigos , dependiendo del tipo de barra que quieras tener, escoges entre los códigos de la barra negra, verde o azul. Estos códigos independiente del que escojas debes pegarlo en gadget de javascript que puedes encontrar en el diseño del blog.

<style>

.showpageArea {
  border:1px solid #323B3F;
  color:#777777;
  font-size:10px;
  margin:0;
  padding:5px 0;
  text-align:center;
  background:#464646;
}
.showpageArea a {
background:;
border:1px solid #909090;
color:#DCDCDC;
font-weight: normal;
margin:0 2px;
padding:2px 7px;
text-decoration:none;
}
.showpageArea a:hover {
border:1px solid #F0F0F0;
color:#FFFFFF;
background:#999999;
}
.showpageNum a {}
.showpageNum a:hover {}
.showpagePoint {
background-color:#606060;
border:1px solid #FFFFFF;
color:#F0F0F0;
margin:0 2px;
padding:2px 7px;
}

</style>

<a href="http://pczeros.blogspot.com" target="_blank"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Tódo para el blog" title="Todo para el blog"/></a>

<script type='text/javascript'>
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
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=5;
  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">'+thisNum+'</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"></span>'+upPageHtml+' '+html +' ';
    }
  }
  html = '<div class="showpageArea">
'+html;
  // html = '<div class="showpageArea">
<span class="showpage"> Total '+(postNum-1)+': </span>'+html;
  if(thisNum<(postNum-1)) {
    html += downPageHtml;
  }
  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'/>
<a href="http://pczeros.blogspot.com/######" target="_blank" title="Paginación para blogger"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Paginación" title="Paginación para blogger"/></a>

Opción paginación para blogger tonalidades verdes

<style>

.showpageArea {
  border:1px solid #ffffff;
  background:#E7FDE3;
  color:#777777;
  font-size:10px;
  margin:0;
  padding:5px 0;
  text-align:center;
  background:#54B909;
}
.showpageArea a {
background:#9BCF74 scroll left 50%;
border:1px solid #ffffff;
color:#ffffff;
font-weight: normal;
margin:2px;
padding:2px 7px;
text-decoration:none;
}
.showpageArea a:hover {
border:1px solid #ffffff ;
color:#FFFFFF ;
background:#54b909;
}
.showpageNum a {}
.showpageNum a:hover {}
.showpagePoint {
background-color:#54b909 ;
border:1px solid #FFFFFF;
color:#F0F0F0;
margin:0 2px;
padding:2px 7px;
}
</style>

<a href="http://pczeros.blogspot.com" target="_blank"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Tódo para el blog" title="Todo para el blog"/></a>

<script type='text/javascript'>
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
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=5;
  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">'+thisNum+'</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"></span>'+upPageHtml+' '+html +' ';
    }
  }
  html = '<div class="showpageArea">
'+html;
  // html = '<div class="showpageArea">
<span class="showpage"> Total '+(postNum-1)+': </span>'+html;
  if(thisNum<(postNum-1)) {
    html += downPageHtml;
  }
  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'/>
<a href="http://pczeros.blogspot.com/######" target="_blank" title="Paginación para blogger"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Paginación" title="Paginación para blogger"/></a>

Opción paginación para blogger tonalidades azules

<style>


.showpageArea {
  border:none;
  color:#5FCAFF;
  font-size:10px;
  margin:0;
  padding:5px 0;
  text-align:center;
  background:#5FCAFF;
}
.showpageArea a {
background:#7FD5FF;
border:1px solid #fff;
color:#fff;
font-weight: normal;
margin:2px;
padding:2px 7px;
text-decoration:none;
}
.showpageArea a:hover {
border:2px solid #F0F0F0;
color:#5FCAFF;
background:#fff;
}
.showpageNum a {}
.showpageNum a:hover {}
.showpagePoint {
background-color:#00A0EF;
border:3px solid #FFFFFF;
color:#F0F0F0;
margin:0 2px;
padding:2px 7px;
}

</style>

<a href="http://pczeros.blogspot.com" target="_blank"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Tódo para el blog" title="Todo para el blog"/></a>

<script type='text/javascript'>
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
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=5;
  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">'+thisNum+'</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"></span>'+upPageHtml+' '+html +' ';
    }
  }
  html = '<div class="showpageArea">
'+html;
  // html = '<div class="showpageArea">
<span class="showpage"> Total '+(postNum-1)+': </span>'+html;
  if(thisNum<(postNum-1)) {
    html += downPageHtml;
  }
  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>
<a href="http://pczeros.blogspot.com/######" target="_blank" title="Paginación para blogger"><img src="http://sites.google.com/site/pczeros/Home/1t.gif" border="0" alt="Paginación" title="Paginación para blogger"/></a>

Espero te haya servido de mil maravillas. Un abrazo para ti.

sábado, 1 de enero de 2011

PAGINACION PARA TU BLOG