63

Gadget de entradas más populares (script)

Hace bastante tiempo habíamos visto como incluir en nuestro blog un gadget de "Entradas más populares".

Este gadget aún está funcionando perfectamente, aunque presenta a veces un problema de lentitud excesiva en su carga; esto es porque el gadget usa las Pipes de Yahoo para funcionar, es decir depende de este servicio externo, así que cuando allí hay algún problema el gadget tarda demasiado en cargar e incluso puede no llegar a hacerlo, lo que hace que nuestro blog también se demore en su carga.

En esta entrada veremos como incluir un gadget que muestre las entradas más populares mediante un script, que no dependerá de alojamientos ni sistemas externos para mostrar los resultados ya que lo incluiremos en el mismo gadget directamente.

Podéis verlo funcionando en mi sidebar en "Post más populares".

Podremos hacerlo de dos formas, mostrando el número de comentarios de cada entrada o sin mostrar los comentarios.

Entradas más populares


Entradas más populares con comentarios.

[1] En nuestro panel desde Diseño, añadimos un nuevo gadget HTML.

[2] Copiamos este código y lo pegamos en el nuevo gadget:

<div id="popular-posts">
<script language="JavaScript">
aBold = true;
numposts=300;
maxshowresult=10;
home_page = "http://elescaparatederosa.blogspot.com/";
</script>
<script type="text/javascript">
//<![CDATA[

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a> ["+postCommentar[f]+" comentarios]";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>')
//]]>
</script>
</div>

[3] Guardamos los cambios.


Entradas más populares sin comentarios.

[1] En nuestro panel desde Diseño, añadimos un nuevo gadget HTML.

[2] Copiamos este código y lo pegamos en el nuevo gadget:

<div id="popular-posts">
<script language="JavaScript">
aBold = true;
numposts=300;
maxshowresult=10;
home_page = "http://elescaparatederosa.blogspot.com/";
</script>
<script type="text/javascript">
//<![CDATA[

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>
</script>
</div>
[3] Guardamos los cambios.


Modificaciones en ambos casos:
aBold = true; Los títulos de entrada estarán en negrita, cambiamos "true" por "false" si queremos que se vean normal.
numposts=300; El número de entradas de donde el script tomará los datos.
maxshowresult=10; Resultados a mostrar en el gadget.
home_page = "http://elescaparatederosa.blogspot.com/"; Cambiar la dirección del blog.

Ambos códigos están incluidos dentro de un div (<div id="popular-posts">)lo que nos permitirá controlar su diseño desde el CSS como hacemos con cualquier lista.

#popular-posts {
/*Aquí los estilos para el contenedor */
}
#popular-posts ul {
/*Aquí los estilos para la lista de los enlaces */
}
#popular-posts li {
/*Aquí los estilos para cada uno de los enlaces de la lista */
}
#popular-posts a {
/*Aquí los estilos para los links */
}
#popular-posts a:hover {
/*Aquí los estilos para los links al paso del ratón */
}

Entradas Relacionadas:

63 comentarios:


Anna Jorba Ricart

Rosa, gracias ..ya lo he añadido a mi blog,pero....me queda una duda cuando dices:
"Cambiar la dirección del blog.
Recordad cambiar la dirección del blog también en la última línea del código."
He cambiado la direccion de tu URL http//elescaparate de rosa.blogspot.com por mi dirección...pero... ¿ a que te refieres con la última linea del codigo ?

Ago

hola Rosa! :D
una pregunta: hay unas diferencias entre los dos?
Es decir: el primero muestra los posts mas populares segundo los comentarios...el segundo es lo mismo solo que no muestra el numero de los comentarios o muestra los posts mas leidos, sin considear el numero de los comentarios?
Mil besitos y graciassss!!!! :D

*Eva*

Hola Rosa! Hasta ahora estaba usando el gadget con las pipes de yahoo, y acabo de cambiar a este. Gracias!!!!

marco

Hola Rosa, el gadget me salió bien, pero como que todo sale en una misma línea y se ve desordenado y no como el tuyo en donde el título sale en una linea y el número de comentarios en otra. Quisiera saber qué hice mal ya que no tengo la menor idea de lo que hice con el CSS, jeje. http://bajotumirada.blogspot.com

Besos, gracias por tu tiempo

kemii

Buenísimo Rosa. Me ha venido genial.
Como siempre, aportazos!^^
Que haríamos nosotros sin ti :D

ra.

ola rosa! gracias por el post, muy bueno.

me sale todo bien, la entrada y acontinuacion el numero de comentarios. pero en la primera entrada tb me sale justo antes el numero de comentarios, como locambio?

http://ralongboard.blogspot.com


gracias!

ra.

enrique

"Recordad cambiar la dirección del blog también en la última línea del código".... ????
No entiendo esta parte.

Bocha

URGENTE!!!!!

Tengo un problema en el blog y no se solucionarlo...!!

En casi todas las imagenes aparece un cuadrado tipo Link, y antes no se veia de esa forma.QUEDA MUY FEO Y LO QUIERO SACAR!

Mira esta imagen: http://img44.imageshack.us/img44/8320/4545234.png (ESE ES EL PROBLEMA)

Todo este problema comenzo cuando yo coloque la paginacion de las entradas, para suplantar los enlaces de navegacion. Cuando me di cuenta saque inmediatamente el codigo y el problema sigue igual.

QUE HAGO, ESTOY MUY PREOCUPADO.

Rosa

Anna Jorba Ricart Se me escapó la frasecita esa :S... en un principio la entrada era para usar el script en un alojamiento externo y así la había preparado, luego me arrepentí y la edité... la frase se quedó ahí por error... perdona y no la tengas en cuenta, todo bien como lo has hecho. :D

MAG

Rosa:
Nuevamente gracias por todo lo implementé en mi blog y quedó perfecto.
Miguel.

Rosa

Ago En realidad no hay ninguna diferencia...en Blogger no hay otra forma de controlar cuales son las entradas más populares más que por el número de comentarios... la única diferencia es estética... en uno se ven y en otro no simplemente.

Rosa

*Eva* Yo también lo hice... parece que va bien y es mucho más ligero.

Rosa

MarcoTu sidebar es bastante estrecha y cuando la línea de título ocupa más espacio los comentarios se ven debajo, cuando el título es corto a continuación... a mi me pasaba, eso no puede controlarse del todo por eso opté por el "sin comentarios".
De todos modos, añade esto en el CSS (antes de ]]></b:skin>) creo que algo mejorará...

#popular-posts ul {text-align: left;}

Rosa

ra. No es que te salga delante, es que seguramente esa entrada no lleva título, el gadget la recoge por su número de comentarios... a más comentada, más popular... sino está titulada, muestra solo el número de comentarios... en este caso de entradas sin título lo más adecuado es usar el gadget sin comentarios...

Rosa

enriquePerdona, ha sido un lapsus :S
Olvida esa frase (comentario número 9)

Rosa

BochaLocaliza esto en la plantilla:

/* LINKS DEL BLOG

Y justo sobre eso pones este código:
a img{ border-width:0;}

Bocha

MIL GRACIAS, Rosita de mi alma, por suerte ya no hay problema...

Saludos

Enorme el trabajo tuyo, muchas gracias.

Rosa

BochaMe alegro! :D

Javier Adán

Gracias Rosa, ya lo añadí.
Un beso

Marcoiris

Gracias Rosa! :D

cargohe

Hola rosa gracias, pero como le hago para enumerarlos ó ponerles un icono.

Bocha

Rosa,

volvi a meter abajo de todo la paginacion... y quedo lindo, ahora mi duda... como hago para acortar la distancia que hay entre esa paginacion y la parte de abajo del contorno del MAIN. ??

En esta foto te muestro que parte es:

http://img203.imageshack.us/img203/836/676767.png

El Xhabyra

¡excelente! muchas gracias Rosa, usaba el anterior pero lo quite por lo problemas que presentaba de no funcionar regularmente.

ya pongo este en mi blog

ANRAFERA

Muy interesante. Gracias. Saludos.

El Potro

Uy esto está excelente Rosa!
Hace tiempo usaba el de las Pipes de Yahoo pero además de la lentitud de la carga los resultados me salían muy distantes a la realidad por lo que acabé quitándolo, pero con esta opción parece que no habrá más problemas.

Muchas gracias! :D

Lunaria Artesanías

Muchas veces te visitabamnos... hoy ya estás "enlazada".
El blog tiene un primer diseño de m i hijo, después Quelu nos ayudó bastante!!!! tus aportes son muy buenos y me ayudan a aprender. Ya vendrán consultas!!! Besos!

Rosa

El Potro Observemos como va con prudencia... de momento a mi me parece que está bastante mejor si...
¡Gracias por pasar!:D

Rosa

carhoePara enumerarlos tendría que ser modificando el script.
Para ponerles un iconito, sería algo así aplicado en el css:

#popular-posts li {
background: url(URL_DEL_ICONO) no-repeat;
}

Rosa

Lunaria Artesanías Gracias!!! :D Tienes un blog lindísimo.

cargohe

gracias Rosa, otra inquietud, si uno tiene mas de mil entradas y pone numposts=300 cogería solo los 300 primeros post, o buscaría los 300 mas comentados.

Rosa

cargohe Se supone los más comentados... una cosa, cuando empieza a fincionar el gadget tarda en "estabilizarse", al principio a mi me pasó mostraba entradas con pocos comentarios... después se fue ajustando más a la realidad el solo...

мαтιαѕ fє∂єяι¢σ

Hola Rosa me gustaria saber un mail al q pueda mandar dudas y ser responidido. Esta muy bueno tu blog y me ha sido de mucha ayuda.

PD: Ya he enlazado al Escaparate en mi blog

http://todojuegosflash.blogspot.com/

marco

Rosita, no sirvió mucho el agregado al CSS, lo que quería era que la línea de comentarios sea otra a la de los posts, pero ni hablar. De todas maneras gracias por tu tiempo.

Besos

Ricardo Baena

Muy útil. Ya lo tengo funcionando en mi bitácora. Gracias.

Onetwothree

Hola Rosa,

Es un lástima pero no me funciona y lo incluí como HTML en Blogger, no se si será por la plantilla personalizada que tengo pero simplemente muestra el nombre del elemento pero no el contenido.

Se que con estos datos es difícil que sepas que pasa pero agradecería mucho la ayuda.

Muchas gracias y un saludo.

Rosa

Onetwothree Lo he mirado en tu código fuente y todo parece estar correcto... lo único que veo que falta, es la barrita de cierre después de la url de tu blog / .... mira si es eso...

Rosa

мαтιαѕ fє∂єяι¢σ Justo sobre donde has escrito el comentario está mi email...

Bocha

Rosa,

volvi a meter abajo de todo la paginacion... y quedo lindo, ahora mi duda... como hago para acortar la distancia que hay entre esa paginacion y la parte de abajo del contorno del MAIN. ??

En esta foto te muestro que parte es:

http://img203.imageshack.us/img203/836/676767.png

Onetwothree

@Rosa: ya funciona, nunca pude imaginar que la barrita de cierre influiría tanto :O

Muchísimas gracias.

k_nelita

Hola Rosa como estás tanto tiempo? Ya no se te ve mas por Twitter... y yo ando bastante perdida de los blogs, pero te sigo siempre ;)
Hace rato que buscaba algo como esto, pero tengo algunas dudas, 1) sin poner css, como quedaría? Porque no tengo idea de como hacerlo :o
2) como hacer para poner un elemento html nuevo en un blog ahora que eso no está funcionando? Me refiero a que no se pueden mover los gadgets, si yo lo pongo, he de hacerlo en el primero, o sea arriba de todo en la sidebar, pero no lo quiero allí y no se pueden bajar, ni cambiar de sidebar ni nada...
Como han hecho todos los que lo pusieron? Usan IE? Yo ni con IE puedo hacer nada hace un tiempito ya, te sabes algún truco para ubicar el gadget donde una quiere?

Un beso Rosa ;)

Rosa

Bocha Lo siento... seguro tendría que andar viendo el diseño de los gadget o el tema de la paginación que nunca he usado para indicarte algo, y no dispongo del tiempo necesario la verdad para ayudar de forma personalizada a cada uno... algo general si, pero tan concreto sería de locos, no podría ni descansar...

Rosa

Onetwothree Un puntito, una coma... todo influye, ha de estar idéntico...

Rosa

k_nelita Prueba a colocarlo sin CSS y si te gusta así bien, sino me dices lo que querrías corregir...

En cuanto a los gadget, si, en IE y Chrome por lo visto va bien... Mira en esta entrada de Vagabundia para saber como colocarlos:
http://vagabundia.blogspot.com/2010/01/por-que-no-se-pueden-reordenar-los.html

Nena

Hola Rosa! Genial post lo voy a intentar:)
Una pregunta ¿Como pones los cuadros donde muestras los codigos? lo he buscado pero nada :S
Saludos!

Rosa

Nena Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2009/01/estilos-de-blockquotes-citas.html

Carlos Soler

Gracias Rosa me ha ido muy bien para mi nuevo blog de Música y Guitarra. Un abrazo.

Rosa

Carlos Soler "Tenemos" nuevo blog? :D Eso habrá que verlo....

Carlos Soler

Pues la verdad es que me hará mucha ilusión que le hagas una visita, lo veras en mi perfil, lo he creado junto con mi madre en memoria de mi abuelo que fue un guitarrista amateur importante, Carlos Santias. Un abrazo, te esperamos!

Rosa

Carlos Soler Allí acabo de estar... ¡precioso! :)

Carlos Soler

Muchas gracias Rosa! :)

Meiguiña

Gracias Rosa, me ha sido de muchisima uitlidad

Biquiños meigos

© ۞Jair Octavio۞

Hola Rosa, me gustaria que me ayudaras una vez mas, lo que pasa es que en el blog principal de inicio que ocupo como presentacion, tengo que poner una sola imagen de fondo, me gustaria saber si habra una manera de que sean dos, como si un codigo fuera para la foto, y ese editarlo siempre que quiera cambiarle por otra imagen, por que ese que esta es el background y es una sola imagen, pero me gustaria saber si se pudiera hacer otro codigo para solo la imagen pequeña de la playa la que dice 2006, para cambiar esa imagen cuando sea posible, y dejar el fondo de madera estable...

De antemano mil gracias, salu2 y que tengas una exelente semana...

José

Gracias Rosa. Hace tiempo que buscaba incluir ensa función en el blog y funciona muy bien. Enhorabuena por tu estupendo trabajo.

Rosa

© ۞Jair Octavio۞ Lo que ahora mismo tienes es una imagen sola (el fondo de madera y la de la playa juntas en una) tendrías que colocar la de madera en el body{ tal como la tienes ahora y la otra en #outer-wrapper{ tal como pones la otra en el body... en el mismo bpdy no pueden añadirse dos...

© ۞Jair Octavio۞

Hola Rosa, gracias, fijate que andube mueve y mueve todo, tanto los anchos y las px de cada parte, del #outer-wrapper y si casi le atinaba, pero el rollo esta en saber bien...

Intentare una vez mas y te aviso, Mil gracias nevamente...

Valentín VN

Muchas gracias Rosa, funciona de maravilla.

Gustavo

Excelente!! Es justo lo que estaba buscando

Saludos

tlalpancasaenventa

Pienso que un Gadget como este es muy útil porque ayuda a que los visitantes permanescan mas tiempo en nuestro blog y se den la oportunidad de curiosear otras notas.

Carlos Soler

Hola Rosa,

Al fin me he decidido implementar esto que explicas en los blogs Blogtecnia, AideRSS, hacia que la carga de la pagina fuera muy lenta, ahora con estas entradas populares carga como un rayo, ya lo había probado en el blog de Carlos Santias, con muy buenos resultados, mil gracias.

Rosa

Carlos Soler Nunca se sabe y supongo depende de otros scripts que uno tenga en la plantilla... en mi caso este lo retiré porque me "paraba" la carga de la sidebar...:S

Carlos Soler

Sera cuestión de observar como va, gracias.

Alberto

se agradece.. :D

visita mi web: www.v-junker.com

;)
saludos!

Sergio

jejeje, no le cambie la direccion de tu blog y me aparecieron todos tus post :D

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S