La paginación es cualquier tipo de sistema de control que permite al usuario navegar a través de las páginas de resultados de búsqueda, archivos, o cualquier otro tipo de contenidos.
La paginación se encuentra también en algunos blogs, foros de debate y en la web de comics.
1. Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget, seleccionas HTML/Javascript y pegas el siguiente código:
————————————————-
<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=1;
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=»font-size:10px;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>
——————————————–
Explicación:
– .showpageArea .- Es el rectángulo donde se va a mostrar la paginación.
– .showpageArea a .- Son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad, como ponerles una imagen y un borde.
– .showpageArea a:hover .- Se refiere al efecto gráfico cuando colocamos el ratón encima de la paginación.
– .showpageNum a y .showpageNum a:hover .- Son los enlaces con los números de las páginas si es que queremos que se vean diferentes.
– .showpage a y .showpage a:hover .- Son los enlaces con los textos si es que – queremos que se vean diferentes.
– .showpagePoint .- Es el texto que se muestra en la página actual, es decir los números.
– var pageCount .- La cantidad de posts que se mostrarán por página.
Si var pageCount=4 entonces se mostraran por pagina 4 artículos publicados.
– var displayPageNum .- La cantidad de páginas listadas.
Si var displayPageNum=1 entonces se listarán 1 más 1 página, serian 2.
2. Finalmente, después de haber pegado el código en un HTML/Javascript necesitas arrastrar el widget y ponerlo debajo de Entradas del blog.
Resultado:
– Por ejemplo, si deseas eliminar Página 1 de 88 entonces tendrías que eliminar el siguiente código que se encuentra casi al final:
—————————————–
—————————————–
html = ‘<div class=»showpageArea»><span style=»font-size:10px;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;
—————————————–
