Colocando paginación en Blogger

E

ncontré un truco en Vagabundia sobre como colocar paginación al blog, es algo parecido a los Iconos de Navegación, este truco lo ha creado Blogger Accessories y nos permite personalizarlo a nuestro gusto mediante una hoja de estilos (CSS).

¡Recuerda! "GUARDAR SIEMPRE UNA COPIA DE TU PLANTILLA EN TU PC

Ahora nos vamos a plantilla en HTML y sin expandir en artilugios, buscaremos esto:


<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

A continuación colocaremos este códigos debajo de </b:section>:

VER/CERRAR CÓDIGO

<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=4;
var displayPageNum=2;
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'/>

Podemos modificar algunos valores del código como:
Este es para la cantidad de post que se quiere mostrar por páginas por defecto se muestra una sola.
var pageCount = 4; (El 4 lo puedes cambiar por el que quieras)
Este es para la cantidad de páginas listadas y que por defecto son 2
var displayPageNum=2; (El 2 lo puedes cambiar por el que quieras)

Este es para cambiar el texto:

var upPageWord ='◄ Página Anterior'; (El “página anterior lo puedes cambiar por el que tu quieras”)
var downPageWord ='► Página Siguiente'; (El “página siguiente” lo puedes cambiar por el que tu quieras)

Ahora para culminar con este truco solo tienes que agregarle el estilo. Como veras las propiedades están dentro de la etiqueta <style>. Estas son las propiedades originales

VER/CERRAR CÓDIGO

<style type='text/css'>
.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;
}


</style>

JMiur explica el significado para poderlo personalizar:

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


Algo más:


1. Si no quieres colocar todo este procedimiento, hay una forma más fácil aun de colocarlo, consiste en colocarlo en elemento HTML y lo ubicamos debajo del elemento de Entradas del Blog y colocaremos el código en el siguiente orden, primero colocaremos el estilo y luego el script. Véanlo aquí.
2. JMiur le han notificado una falla del truco en los blog que tiene un dominio propio.
Solo tenemos que buscar la línea en el script:
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
Y cambiarla por está:
var isFirstPage = thisUrl=="miDominio"; (Donde dice “miDominio” tienes que cambiarlo por el dominio propio)
3. Este truco no se vera en vista previa.
4. El truco no funciona el en post solos, también el script no afectara a los que tienes iconos de navegación en el blog, así que lo post individuales se vera los iconos de navegación.
5. Vagabundia a puesto a la orden de todos su hoja de estilo solo tienes que pulsar aquí.