OPCIONES DE PAGINACIÓN PARA BLOGGER

OPCIONES DE PAGINACIÓN PARA BLOGGER .

Una de las mayores utilidades cuando empiezas a tener muchas páginas con una misma etiqueta (y que además le da un toque muy profesional a tu blog)
es agregar un sistema de Paginación, en esta oportunidad  ESCAPARATE DIGITAL 2019 te trae un código para agregar una Paginación para Blogger.

Una de las grandes ventajas que busco con este sistema de Paginación para el blog es que sea sencillo de instalar y que no requiera modificar elcódigo fuente de la plantilla de tu blog como otros sistemas de Paginación para blogger disponibles, es decir que se coloque en tu blog de la misma forma que cualquier otro gadgets o widgets.

 Cómo agregar el código al blog, :                           

Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Ir a Blogger  

1-Un clic en “Diseño” 

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo 

4-Coloca el siguiente codigo en el interior

Si aún no sabes lo que es la Paginación, con las siguientes imágenes junto a los códigos seguro te darás cuenta.


El código para agregarla es el siguiente:

Opción Paginación para blogger dark-1

<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-2

<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-3

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

Para insertar el sistema de Paginación en el blog sólo copia el código e insértalo en tu blog (puedes elegir la combinación de colores que mas te agrade), si precisas ayuda en esta parte aquí te digo cómo agregar el código al blog, de lo contario sigue adelante.

A pesar de que tienes tres diseños prontos de Paginación para Blogger para agregar, el código de la  Paginación para Blogger es totalmente personalizable, con esto me refiero a que puedes elegir cualquiera de los diseños y cambiar los colores como mejor te parezca para que se adapte al diseño de tu blog, a continuación una ayudita para esta parte:

.showpageArea {} son las propiedades css del rectángulo grande donde se va a mostrar la Paginación
.showpageArea a {} son las propiedades css de los cuadritos de los enlaces, los números y las palabras anterior y siguiente.
.showpageArea a:hover {} son las propiedades de los cuadraditos de los enlaces, los números y las palabras anterior y siguiente cuando el puntero está arriba.
.showpagePoint {} son los estilos del cuadratito y texto de la página actual
Los estilos anteriores de la  Paginación para Blogger están en CSS, si conoces el lenguage seguramente encontrará otras cosas para modificar, si no conoces nada de este lenguaje te recomiendo que te dediques únicamente a modificar los colores de bordes (border) fondo (background) y del texto (color). Los colores estan en código de colores exadecimal (por ejemplo el color blanco en este código es #FFFFFF), si necesitas ayuda para los códigos de colores puedes ver Códigos de colores RGB

En el cógigo JavaScript que hace que la Paginación para Blogger funcione, también tienes algunas cosas que modificar:
var pageCount = n; es la cantidad de post que se mostrarán por página, cambia n por el valor que quieras.
var displayPageNum=n; n es la cantidad de páginas que se mostarán en en la paginación, por ejemplo si pones tres tu Paginación quedará [1][2][3][Siguiente], de donde si dás en siguiente tu Paginación quedará [Anterior][2][3][4][Siguiente], el número que debes de poner depende de la cantidad de páginas que tiene tu sitio si no tienes muchas un valor 2 o 3 anda bien.

Despues de haber insertado el código, un clic en  "Guardar"

Fecha de la Publicación; 20-01-2019

 Fuente;  pczeros

 Publicado por;