Poner Paginaci??n p??ginas numeradas Blogger

  • noviembre 12, 2010
Poner Paginaci??n p??ginas numeradas Blogger

Blogger solo muestra un enlace a la p??gina siguiente y anterior, con la p??gina es posible mostrar un cantidad m??s grande de p??ginas para navegar indicadas con n??meros. Nuevamente el funcionamiento se basa en un script que es necesario instalar en el blog para que funcione. 

Paginar es separar las entradas del blog en grupos de cierta cantidad de entradas y permitir navegar entre ellas. 

En Blogger, la ??nica posibilidad que tenemos es Avanzar (Newer Post) o Retroceder (Older Post); en otros servicios, tambi??n existe la posibilidad de crear esa paginaci??n de tal manera que no s??lo podemos avanzar o retroceder sino «dividir» nuestro blog de tal manera de poder «saltearnos» cosas y navegar m??s r??pido: 

 

En Blogger Accesories han creado un script que nos permite hacer esto con algunas limitaciones pero, funciona bien y, como parte del truco se basa en propiedades CSS, nos da la posibilidad de personalizarlo de muchas maneras. 

 

Para empezar, vamos a la plantilla y sin expandir lo artilugios, buscamos lo siguiente: 

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
 

Justo debajo, agregamos el script que pueden descargar de este archivo de texto o copiarlo del blog original. Este es su contenido: 

dijo:
<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++) {
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&amp;callback=showpageCount&amp;max-results=99999′ type=’text/javascript’/>



En el c??digo, hay una serie de valores que podemos modificar: 

La cantidad de posts que se mostrar??n por p??gina (por defecto una sola): 
var pageCount = n; 

La cantidad de p??ginas listadas (por defecto dos) 
var displayPageNum=n; 

Los textos a mostrar: 
var upPageWord =’Back’; // p??gina anterior 
var downPageWord =’Next’; // p??gina siguiente 

Para que todo estuviera terminado s??lo nos faltar??a agregar el estilo. Eso lo ponemos entre etiquetas <style> o bien antes de </b:skin>. 

Este son las propiedades originales definidas por Blogger Acccesories: 

dijo:
.showpageArea {
background: transparent url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top;
color:#003366;
font-size: 11px;
padding: 10px 15px 10px 30px;
text-align: left;
width: 470px;
}
.showpageArea a {
color: #0F0;
text-decoration: underline;
}
.showpageNum a {
border: 1px solid #FFF;
color:#0F0;
margin: 0 10px;
padding: 0 5px 0 8px;
text-decoration:none;
}
.showpageNum a:hover {
color: #FE8314;
background-color: #FFF;
border: 1px solid #0071A5;
}
.showpagePoint {
color: #FE8314;
margin: 0 8px 0 4px;
}
.showpage a {
color: #FFF;
padding: 0 2px 0 4px;
text-decoration: none;
}
.showpage a:hover {
color: #FE8314;
text-decoration: underline;
}
.showpageNum a:link,.showpage a:link {
color: #CC0000;
text-decoration: none;
}



Veamos que significa cada cosa as?? podemos personalizarlo: 

.showpageArea {} es el rect??ngulo donde se va a mostrar la paginaci??n y en el ejemplo, tiene una imagen de fondo. En mi caso, s??lo defin?? un borde, elimin?? el ancho y centr?? el contenido. 

.showpageArea a {} son los enlaces en general (los n??meros de las p??ginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad; yo, eleg?? ponerles una imagen y un borde. 

.showpageArea a:hover {} no est?? en el ejemplo pero, como en mi caso, todos los rectangulitos ser?? iguales se lo agrego para cambiar el efecto gr??fico cuando colocamos el rat??n encima de un enlace. 

.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 muestra el n??mero de la p??gina actual 

Otra posibilidad si no se quiere poner el c??digo a la plantilla, es agregar un elemento HTML y ubicarlo justo debajo del elemento Entradas del Blog. En ese caso, es all?? donde colocamos el estilo y debajo, el script. 

Es importante saber que la paginaci??n no funciona en las p??ginas individuales (esto es lo normal incluso en otros sistemas) pero tampoco funciona si navegamos por etiquetas utilizando hacks y, esto ??ltimo es una limitacion. De cualquier modo, me parece una soluci??n interesante y pese a que los c??digos son largos, es bastante simple de implementar y all?? en el fondo, pueden verlo funcionando. 

No Comments Found