sábado, 15 de agosto de 2009

Paginacion en blogger


Hoy les mostrare como poner una paginacion (como en mi blog) en su blog
-Se van a "Diseño"
-añadir un gadget
-seleccionas "agregar elemto "HTML/javascript"

y pegas el siguiente codigo...
Ver / ocultar (click)


<style>

.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;

}

.showpageArea a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;

}

.showpageArea a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}



.showpageNum a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;



}

.showpageNum a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;



}

.showpagePoint {font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

font-weight: bold;

border: 1px solid #333;

color: #fff;

background-color: #000000;





}



.showpage a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;



}

.showpageNum a:link,.showpage a:link {

font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

text-decoration: none;

border: 1px solid #0066cc;

color: #0066cc;

background-color: #FFFFFF;}



.showpageNum a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

</style>







<script type="text/javascript">



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=7;

var displayPageNum=5;

var firstPageWord = 'Primera';

var endPageWord = 'Ultima';

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"><u>'+thisNum+'</u></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"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}else{

html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}

}



html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">'+thisNum+' de '+(postNum-1)+': </span>'+html;



if(thisNum<(postNum-1)){

html += downPageHtml;

html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';

}



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&callback=showpageCount&max-results=99999" type="text/javascript"></script>




Ahora lo unico que hay que hacer es moverlo abajo de el bloque entradas del blog



y listo

Detalles:
podemos editar algunas funciones como:
var pageCount = 5; (numero de paginas que se muestran por pagina)
var displayPageNum = 3; (numero de paginas en la lista)
var firstPageWord = 'First'; (cambiar por Primero, Inicio, etc)
var endPageWord = 'Last'; (cambiar por Último, algún símbolo, etc)
var upPageWord ='Previous'; (cambiar por Anterior, algún símbolo, etc)
var downPageWord ='Next'; (cambiar por Siguiente, algún símbolo, etc)
Page '+thisNum+' of ' (Página - de, o lo que gusten poner)

Fuente: Poca Tinta
Idea sacada del blog "Todo San Luis" se los recomiendo mucho
Saludos!!

8 comentarios:

  1. Esto si kelo pa mi blog!!!

    Gracias por el dato!!!

    Y gracias por tus consejos!!!

    ResponderBorrar
  2. De nada =D
    Tambien me dedicare a eso xD a dar consejos blogger =P

    ResponderBorrar
  3. al contrario gracias por visitarnos =D
    Saludos!!

    ResponderBorrar
  4. Gracias nada mas que decir que muchas gracias,

    mira en mi sitio para que veas como quedo.

    gracias por todo.

    ResponderBorrar
  5. Hola! me serviria mucho saber como haces ese ver/oculta(click), gracias! y saludos!! espero tu pronta respuesta

    ResponderBorrar
  6. k buena informacion, habia entrado a otra paginas para buscar esta informacion, pero era muy dificilm,el tuyo es otra cosa, otro nivel. gracias

    ResponderBorrar
  7. pues en el mio no se que paso pero no aparece

    ResponderBorrar

Gracias por visitarnos espero hayas encontrado lo que buscabas o te hayas divertido. Dejanos tu opinion todo comentario es bienvenido =D Saludos!!

¿como poner tu nombre?
Facil le das a "nombre/URL" en el cuadro de abajo pones tu nombre (Juan, Pedro Pancho) y tu URL (facebook, twitter, blog o lo que tengas)

<a href="URL">link</a> | <b>negrita</b> | <i>cursiva</i>