14 septiembre 2008

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

23 comentarios:

  1. hola Antony...una vez sanado mi blog, intentaré hacerlo, queda muy bello así. Mis besitos!!!

    ResponderEliminar
  2. Hola compañero..ando por aqui, bajalo para ver que ocurre....

    ResponderEliminar
  3. aumenta el outer-wrrapper a 870 al menos, la sidebar y el main suman 870 ...

    ResponderEliminar
  4. veo que has puesto el Jquery...que bien!!!...pon esto en donde el texto...

    <span style="cursor:hand;">VER/CERRAR CODIGO</span>

    compi luego puedes borrar los comments si quieres..

    ResponderEliminar
  5. Hola Graciela! No dudes en colocarlo es buenísimo... Saludos!


    Hola Pizcos! Me gusto este abrir/cerrar con Jquery, porque con los otros hay algo que no funciona bien. Gracias por la ayuda prestada...

    ResponderEliminar
  6. Me alegra ver tan buenos aportes por tu blog ;)

    ResponderEliminar
  7. Buenos días Antony, veo que te gusta Mariana Vega.
    Te invito a mi blog SABER MAS DE TI de entrevistas para que puedas leer la que le hice a Mariana.
    La dirección es: www.sabermasdeti.blogspot.com
    Que pases buen día Antony.

    Nuria

    ResponderEliminar
  8. Hola Gema! Me encanta verte por aquí... Saludos!

    Hola Nuria! Excelente entrevista, me gusto mucho... Saludos!

    ResponderEliminar
  9. Gracias por el email, intente el truco pero no tengo en mi plantilla el codigo

    q indicas al inicio

    no se si es porque ella es modificada o que, la verdad me gustaria saber si puedo adactar el truco de alguna otra forma


    saludos y gracias por el dato muy bueno e blog

    ResponderEliminar
  10. Hola MarceloBlog! Claro que hay otra forma y te la he enviado por e-mail... Saludos!

    ResponderEliminar
  11. Este es uno de esos trucos que tengo pendiente para aplicar :)

    ResponderEliminar
  12. Para la gente que ya tiene dominio propio solo tiene que dejar la variable isFirstPage de esta forma "var isFirstPage = thisUrl" (sin comillas por supuesto), lo digo porque al comienzo de la función showpageCount(json) ya se le asigna nuestra URL mediante "location.href;" no entiendo como nadie no ha podido darse cuenta de eso.

    Saludos
    http://www.verasoul.com

    ResponderEliminar
  13. Hola SpamLoco! Es todo tuyo para que lo apliques. Saludos!

    Hola Vera! En realidad no se mucho sobre el script, pero se debería consultar al realizador del script. Pero hay que investigar un poco sobre esto. Saludos y gracias por la visita.

    ResponderEliminar
  14. Hola Antony,has visto esta pagina con explorer???...

    ResponderEliminar
  15. Hola Pizcos! Si ve muy fea, pero tratare de ver que hago...

    ResponderEliminar
  16. no me lo puedo creer.. no funciona! no veo nada de nada
    ¿porque puede pasar?... Lo he probado de las dos formas y nada.
    una lastima porque me hubiera ido muy bien
    saludos

    ResponderEliminar
  17. ¡Hola Bcnoldschool! Es raro lo he probado de nuevo y funciona perfecto, a lo mejor en algo te has equivocado. ¡Saludos!

    ResponderEliminar
  18. Tengo esto

    <!-- (Principal) -->
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
    <b:includable id='nextprev'>

    QUe hago no funciona no encuentro el </b:section>:

    ResponderEliminar
  19. SORRY NO SOY MUY DUCHA EN ESTO Y TODO LO QUE HAGO ES EXPERIMENTAR Y EXPERIMENTAR..ESTOY TRATANDO DE APLICAR ESTO PERO LO DEL STYLE NO ENTIENDO MUCHO DONDE ES QUE LO COLOCARE O QUE DEBO HACER..PLEASEEE

    ResponderEliminar
  20. Ami en lugar de salirme la paginación me ha salido un "ENTRADAS ANTIGUAS" pero bastante guapo, asique lo dejo

    ResponderEliminar
  21. mmmmm en general soy un desastre con la informática xo estoy intentando mejorar y e e lanzado a la imposible misión de crear un blog.....despues de mucho mucho esfuerzo (para mi, porque he dicho que soy un desastre) e conseguido que el blog no este del todo mal, pero esto de paginar el blog me está superando....no se como acerlo, no me saleeeee....si siquiera encuentro la linea e código que dices....


    "



    "



    q hago??? xfa ayudame!!!!

    http://elbauldeladyshira.blogspot.com//

    ResponderEliminar
  22. NO ENCUENTRO ESE CODIGO :( ENTONZEZ NO PODRE HACER ESO?


    VISITEN MI WEB: http://wwehdonlive.blogspot.com/

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!