17/11/08

Como numerar nuestras páginas de blogger.

Si queréis numerar las páginas de blogger al estilo de wordpres podéis hacerlo de forma rápida y sin necesidad de editar la plantilla.

Tan sólo deberemos copiar un código y añadirlo como un elemento más de Html/Javascript .

(Diseño/Elementos de página/Añadir un gadget/HTML-Javscript.)

Una vez que lo hayamos guardado lo colocaremos debajo de las entradas del blog arrastrándolo con el ratón y volveremos a guardar los cambios.

Código a pegar;

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';



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 = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(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&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>
.

26 comentarios:

Todero dijo...

Ufff Perezoso, que detallazo este hallazgo, había probado otros y no me funcionaban con el Chrome :( pero este esta de pelos.

Cambié algunas cosas para sea en Españolete :D

Saludos

Escriba dijo...

Iré a ver como quedo,ja,ja.Un abrazo nene.

Barrio Privado dijo...

Alguien lo probó, yo no puedo hacerlo andar

Perezoso. dijo...

Esta puesto en el blog.Puedes verlo al final del todo.

No aparece en entradas individuales,no se si es eso a lo que te refieres.

Ganar dinero dijo...

De muchos codigos que probe ninguno me sirvio, pero este si por lo pillo lo que buscaba y ademas que funca, al master le doy 100 puntos. vale sigue asi.

Alexandre dijo...

GRACIAS ME SIRVIO DE MUCHO

Anteo dijo...

Muchas gracias. Me ha sido de mucha ayuda.

KALEMBO dijo...

no me funciono pero gracias de todos modos..

Sumer dijo...

Hola, muy buen post. Pero yo quería saber que tengo que sustituir para ponerle los colores que yo quiera. Gracias. Buen blog.

Perezoso. dijo...

Cambia los colores en el codigo por los que tu quieras.Fijate que en este están puestos #333 y #ccc.Sustituyelos.

Luchotes dijo...

Pues la verdad si funciona, pero se come algunas entradas. Por lo menos a mi me pasa asi. cuando pongo siguiente página se come la primera entrada de la página que viene.

alvaro dijo...

muy bueno es muy necesario en mi blog,
pero tiene un problema , algunas entradas no salen

http://romsfullworld.blogspot.com

goyu73 dijo...

como puedo cambiar el titulo page(6) y poner lo que quiera

Anónimo dijo...

Tengo solo una consulta, quisiera saber a las cuantas entradas que publico en el blog, la primera queda en la segunda pagina ??
ojalas alguien me pueda responder :D
saludos
atentamente ~parowaref (h)

Escriba dijo...

Tendrás que trastear con el código y cambiarle lo de page por lo que desees.

Anónimo;Desde tu escritorio de blogger puedes modificar el numero de post por páginas.No se si es eso a lo que te refieres.

Freddie dijo...

Hola que onda solo pase a agradecer, como muchos comentan, después de buscar en la web es bastante dificil localizar un código que funcione y de forma sencilla, asi como el tuyo, por eso muchas gracias. ¿te molestarias si lo reposteo? obviamente diciendo de donde lo tomé.

Perezoso. dijo...

Me alegro que lo hayas podido implementar en tu blog.Siempre trato de poner cosas sencillas despues de haberlas probado.Puedes hacer el post si quieres.Será un honor que me cites,je,je.Saludos amigos y bienvenido al blog.

MackDisaster dijo...

va de lujo,no como otros,gracias!!

Escriba dijo...

Perfecto entonces Mack.Saludetes.

Hard-Tech dijo...

hay Ciertos Post que no me salen al agregar el codigo en los ultimos

Brochazos dijo...

Mil gracias por el post! No sabía que se podía hacer y me ha servido de mucho en mi blog!


Gracias de nuevo!

=)
Eva

Escriba dijo...

Pues nada a disfrutarlo Eva.Saludetes.

Apocalipsis_316 dijo...

Funciona perfectamente pero resetea el número de post que se pueden ver en una página del blog, lo estoy probando en mi blog y lo voy a poner en español, este es mi blog:

http://descargacion.blogspot.com/

Marco Antonio dijo...

me ayudas mi correo es faznet@hotmail.com prove este codido en unas plantillas simples y funciona perfecto pero cuando lo pruebo en mi plantilla no funciona me podrias ayudar please espero q tengas la experiencia necesaria

Mielcita dijo...

Gracias por compartir esta informacion, pude ponerlo en mi blog y funciona barbaro, solo me gustaria si me pueden ayudar en cosas, quisiera cambiar el color para que quede mas a tono con la plantilla, pero no se que numero seria un rosado fuerte o colorado y por otro lado, me gustaria poder ponerlo 1 o 2 lineas mas abajo, desde ya muchas gracias.

http://mielcitaargentina.blogspot.com

corazondemiel@gmail.com

Geo dijo...

hola muchas gracias muy buen post lo que no queria era modificar la plantilla y me ayudaste gracias pero la numeracion no tiene un numero ilimitado o si
bueno gracias nos vemos

 

Archivo del blog