Hacker of the Web
Tus ideas en código!...y mas

Gadget de Etiquetas expandibles

Supongamos que tienes una lista aburrida de etiquetas, que tal si en vez de mostrar el numero de entradas en esa etiquieta, mejor mostrar el titulo de las entradas en ella.

Etiquetas expandibles

Sería fantástico ¿no?. Además estos feeds no hace que tarde mas la página en cargar. Pues se cargan despues de cargar la página y van apareciendo etiqueta por etiqueta
Para quienes buscan auto-promocionar su blog, pues como dije en ocaciones anteriores la auto-promocion de un mismo blog es muy importante para retener visitas y hacer que los lectores encuentren información relevante para ellos.

Etiquetas expandibles

Se basa en un lector de Feeds especial para Blogger, que muestra solo los titulos de las entradas en cada etiqueta.

Además no hace que dure mas la página en cargar. Así que no se pierde nada en agregarlo. Al contrario se obtiene un mayor tiempo pero de visitas en el blog

[1] Primero debes ir a Diseño>Edicion HTML>Sin expandir plantillas de artilugios

[2] Antes de </head> o despues de <head> agrega el siguiente código javascript:
<script type='text/javascript'>tagsRSS = function (json) {
 var m = (m ? m : 999);
 var f = "",xz;
 m = ( m > json.feed.entry.length ? json.feed.entry.length : m);
 for (var i=0;i &lt; m;i++) {
   var n = json.feed.entry[i];
   var l=n.link;
   for(xz=0;xz &lt; l.length;xz++){
    if(n.link[xz].rel === "alternate"){
      l=l[xz].href;
      xz=l.length+10;
    }
   }
   var t = n.title.$t.link(l).bold();
   f = f + t + "<br/>";
 }
 document.open();
 document.write(f);
 document.close();
}</script>
[3] Por último agrega despues de alguna etiqueta similar a:
<b:widget id='XXXXX' locked='XXXXX' title='XXXXXX' type='XXXX' />
El siguiente código Blogger:
<b:widget id='Label101' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:loop values='data:labels' var='label'>
<div class='etiqueta'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#' expr:onclick='"if(document.getElementById(\"label_" + data:label.name + "\").style.display == \"none\"){document.getElementById(\"label_" + data:label.name + "\").style.display=\"\"}else{document.getElementById(\"label_" + data:label.name + "\").style.display=\"none\"};return false"'>[+/-]</a> <a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>) <br/>
<div class='etiquetas-expandibles' expr:id='"label_" + data:label.name' style='display:none;'>
<script expr:src='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=tagsRSS&amp;max-results=999"' type='text/javascript'> </script>
</div>
</div>
</b:loop>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


[4] Si quieres modificar el estilo de los titulos de las entradas utiliza el siguiente selector CSS:
/*      Etiquetas Explandibles
====================================== */
.etiquetas-expandibles {
}
Siempre salen innovaciones y mejoras para cada cosa, así que puede haber mas formas pero esta es una que les comparto, además yo mismo la desarrollé.

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

13 comentarios !

el Zambullista dijo...

Hola, Hacker of the Web.
Tengo un problema con este código. Blogger no me deja guardar la plantilla si no cierro con ";" dos referencias, "callback" y "max-results" en esta parte del gadget:
"?alt=json-in-script&callback=tagsRSS&max-results=999".
Y cuando lo hago guarda pero las etiquetas no expanden ni contraen ni hacen nada cuando hago click sobre [+/-] (obviamente, sin usar la vista previa, sino la página actualizada del blog). ¿Sugerencias?

el Zambullista dijo...

Algo para aclarar: tengo un gagdet similar, pero que no contrae, solamente expande. Lo ideal es que se comporte como el "Archivo", que puede contraer, expandir y mantenerse expandido. Si el que desarrollaste funciona de esa manera, sustituyo el que tengo ahora.
Muy bueno el blog, y muchas gracias por tu trabajo.

el Zambullista dijo...

Encontré la respuesta que buscaba: en "callback" y en "max-results" debe reeemplazarse el símbolo & por &. Hecho esto, funciona, y perfecto. Es un gran gadget, felicitaciones.
Aprovecho: ¿hay alguno para tener una lista con los títulos de las entradas y entre paréntesis el número de comentarios que tiene cada uno? Sería una especie de "Post más populares" pero extendido no a 5 ó 10 post, sino a todos (o sea, el utópico 999).
Gracias.

el Zambullista dijo...

Ya veo lo que pudo haber pasado cuando copiaste el código. Acabo de ver que el editor me convirtió los símbolos que escribí. Intento de nuevo entrecomillándolos: tiene que reeemplazarse el símbolo "&" por "&" ("&-amp-;", sin los guiones y sin las comillas).

el Zambullista dijo...

Vuelvo, ahora con una consulta. El gadget, como dije, funciona perfecto, salvo por un único detalle: no funciona en las páginas individuales de cada post, sólo funciona en la página principal. ¿Alguna sugerencia para solucionarlo? Gracias de nuevo.

salvatore dijo...

Oye, segui los pasos que me diste y me sale este mensaje a la hpra de guardar.
"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente. "
Ademas cuando la quiero ver en vista previa me obliga a cerrar...Me podrias decir cual es el error que estoy cometiendo.

SäNTÿ dijo...

salvatore, miles de disculpas el error es mio, el código del tercer paso estaba erróneo pero lo he resuleto ahora puedes volver a intentarlo.

Gracias por comentar!!

SäNTÿ dijo...

el Zambullista, el problema se devía a que la variable "data:blog.url" almacena la página actual en la que navegas. Por lo que para recuperar un script la url es errónea imagina esto:

http://santyweb.blogspot.com/2009/06/gadget-de-etiquetas-expandibles.htmlfeeds/posts/default/-/etiqueta

Esta variable fue reemplazada por "data:blog.homepageUrl" que almacena la url del blog, lo que siempre en la página donde este devolverá esto:

http://santyweb.blogspot.com/feeds/posts/default/-/etiqueta

En fin todos tus aportes han sido agregados al script. Junto con las actualizaciones debidas.

Gracias por los aportes y por comentar xD!!

el Zambullista dijo...

Muchas gracias por la respuesta, SäNTÿ (y también por la molestia de avisarme en mi blog -aunque me había suscripto para recibir por correo los comentarios que se hicieran en esta entrada). Ahora quedó perfecto (de lejos, el mejor de los gadget en su tipo) y lo restituí en las páginas individuales, de donde lo había ocultado.
Saludos, y gracias de nuevo.

el Zambullista dijo...

Vuelvo al tema casi un año y medio después. Es algo que me pasa desde entonces con el índice por categorías, pero a lo que me venía resignando. Así que si se puede, bien, y si no también. El asunto es que algunos enlaces del índice no mandan a la página correspondiente de la entrada, sino a un archivo atom/xml, por lo que me dice Firefox en la ventana que me abre para guardarlo. Te copio un ejemplo de URL capturada, de la entrada "Rizando rizos", de la etiqueta ("Tema", en mi blog) "Sobre el movimiento": http://zambullidas.blogspot.com/feeds/1002936023683320693/comments/default
No pasa con muchos, pero tampoco puedo imaginarme qué tienen en común esos con los que pasa.
Cualquier cosa que se te ocurra para solucionarlo, agradecidísimo de antemano.
Abrazo.

SäNTÿ dijo...

el Zambullista, gracias por el dato!!

Espero que ahora si no existan inconvenientes en ese gadget. Para arreglarlo reemplaza el código del paso [2] que antes tenías en tu blog, por este nuevo que acabo de actualizar :P

Y con eso se arregla el problema, jejej. Perdón por aquello.

Lo que podrían tener en común es que tienen un vídeo en MP4, y blogger se desajusta un poco con esas entradas, pero esta totalmente arreglado, así que puedes publicar vídeos y lo que quieras xD!!

Y como pasa rápido el tiempo, apenas creo que publique esta entrada, jaja!

Saludos!

el Zambullista dijo...

Quedó perfecto, muuuchas gracias. Lo repito: el mejor gadget en su tipo de los que conocí.
Saludos!

SäNTÿ dijo...

el Zambullista, jejej:P

gracias, tu tambien colaboraste;)

Buen dia!


Página Principal
Arriba