Paginación en Blogger

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. Este es su contenido:

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

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

ACLARACIONES Y ACTUALIZACIONES:

Es importante recalcar que si implementamos el truco y hacemos click en Vista Previa no veremos nada ya que en este modo, los scripts no se ejecutan así que sólo podemos Guardar y ver el blog.

Un problema reportado por Fernando Alayo Orbegozo en un comentario nos alerta de una omisión en el script. Cuando nuestro sitio no está alojado en blogspot.com (cuando se tiene un dominio propio), deberemos modificar el código porque no funcionará en la página principal aunque sí lo hará en el resto.

Hay una línea que dice:

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";

Alli, se detecta la página principal de nuestro sitio pero, como verifica blogspot.com, un dominio propio será ignorado, deberemos cambiar esa línea por:

var isFirstPage = thisUrl=="miDominio";

Y cambiar miDominio por la dirección de la página principal, por ejemplo:

var isFirstPage = thisUrl=="http://www.dospuntosyaparte.com/";