viernes, 12 de noviembre de 2010

Poner Paginación páginas numeradas Blogger

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. 

5 comentarios:

Anónimo dijo...

porque en el codigo de arriba se ven como caritas en el codigo no afecta eso si lo copio de ahi?

De todo para los blogger dijo...

Lo puedes copiar perfectamente

Servicio Técnico dijo...

epale hermano no me funciona paste por mi blog para que veas http://tecnicopro.blogspot.com/2011/03/codigos-de-colores-hexadecimales.html
no entiendo que hago mal

Silvia y Naomi dijo...

Hola :) Tengo un problema y no se a que se debe. He buscado por muchas páginas como poner la paginación en el blogger y no se que pasa que nunca me funciona. Ya no se que mas hacer. No se si me podrás ayudar pero de todos modos gracias por leer el comentario! :)
Aquí te dejo mi blog, por si acaso. Un beso!

bienvenidoalavidaa.blogspot.com

Ninja dark dijo...

la verdad que eso es lo que nesesito pero no entendi nada :|

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones