Nube de etiquetas 3D: Blogumus sigue funcionando

Hace como 4 años, Roy Tanck ideó un sistema para que las etiquetas de un blog pudieran verse en un formato que simulaba tres dimensiones. Le llamó Cumulus.

Por aquellas fechas publiqué algunas entradas para aplicarlo en Blogger siguiendo la adaptación de Blogger Buster (Blogumus), añadiendo algunas modificaciones que permitían usar enlaces de cualquier otro tipo y mostrando también cómo hacer una nube de imágenes capturadas automáticamente desde un álbum de Flickr o Picasa.

El caso es que desde el principio muchos fueron los que tuvieron problemas y todavía hoy, bastantes me los siguen planteando. Esta entrada servirá de compendio resumido de cómo instalar las dos variantes mencionadas y que además... os funcionen!!

Y si no lo hacen que al menos sepáis cómo repararlas, porque la única causa por la que se os puede cascar el invento es por el problema del alojamiento de la base del gadget: el fichero tagcloud.swf

---

Como se puede deducir de su extensión, este fichero es un ShockWave Flash o lo que es lo mismo, una animación. Es el alma de todo y los códigos que veréis a continuación lo único que hacen es indicar los parámetros necesarios para que se incorpore un contenido determinado y que se vea con cierto aspecto.

Pero si no podemos acceder en caliente al .swf no tendremos nada y ese es el origen de las desdichas de casi todos. Así que antes de pensar que el cacharrito no funciona, lo primero que hay que hacer es comprobar que nuestro fichero marcha.

En los siguientes ejemplos tenéis uno que -de momento- pita y que está alojado en 000Webhost, hosting gratuitio que últimamente estoy probando con algunas cosas que no puedo almacenar en Blogger.

Su dirección es http://www.swfcabin.com/swf-files/1411057468.swf, pero una vez más insisto en que debéis descargarlo, subirlo a un sitio bajo vuestro control y por último sustituir la dirección que yo utilicé por la vuestra (ojo que aparece dos veces). De lo contrario, cualquier día os podrá dejar de funcionar otra vez. El sitio que yo usé para el alojamiento fue swfcabin.com, pero hay otros como swfupload.com, swfupload.com y ripway.com, por ejemplo.

Este es el link para bajarlo:

Descargar tagcloud.swf

Nube de etiquetas automática

Este tipo de código hay que pegarlo en la plantilla, sin expandir artilugios, después de la línea que forma la sección correspondiente a la barra lateral.

Las referencias típicas serían <b:section class='sidebar' id='sidebar' preferred='yes'> en plantillas clásicas y <b:section-contents id='sidebar-right-1'> en las del nuevo diseñador. Hay muchas variantes pero las palabras clave siempre son section y generalmente sidebar.

Después de la instalación podréis moverlo con facilidad más abajo dentro de la sidebar o incluso a otra zona de gadgets, accediendo al apartado Diseño del Escritorio.

Ventaja: Las etiquetas se generan automáticamente
Inconveniente: Los enlaces no funcionan en algunas versiones de IE

<b:widget id='Label88' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type=&quot;application/x-shockwave-flash&quot; data=&quot;http://www.swfcabin.com/swf-files/1411057468.swf&quot; width=&quot;250&quot; height=&quot;200&quot; allowscriptaccess=&quot;always&quot; &gt;
&lt;param name=&quot;movie&quot; value=&quot;http://www.swfcabin.com/swf-files/1411057468.swf&quot; /&gt;
&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot; /&gt;
&lt;param name=&quot;flashvars&quot;
value=&quot;bgcolor=0xffffff;&amp;tcolor=0x000000&amp;hicolor=0xcc0000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='18'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;&quot; /&gt;
&lt;p&gt;Blogumulus by &lt;a href=&#39;http://www.roytanck.com/&#39;&gt;Roy Tanck&lt;/a&gt; and &lt;a href=&#39;http://www.bloggerbuster.com&#39;&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Nube de etiquetas o de enlaces simples (manual)

Para subsanar el problema con IE existe una segunda alternativa, que es prescindir del loop que genera automáticamente las etiquetas. En este caso ya no necesitamos editar la plantilla y directamente podemos poner el código en un gadget tipo HTML/JavaScript.

Ventaja: Podemos mostrar sólo las etiquetas que más nos interesen. Podemos crear una lista de enlaces cualquiera.
Inconveniente: No basta con copiar y pegar, hay que ir incorporando a mano los enlaces que queremos que se vean

<embed quality="high" allowscriptaccess="always" flashvars="bgcolor=0xFFFFFF&tcolor=0x990000&hicolor=0x333333&mode=tags&distr=true&tspeed=100&tagcloud=&lt;tags&gt;
&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA1' style='18'&gt;ETIQUETA1&lt;/a&gt;
&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA2' style='18'&gt;ETIQUETA2&lt;/a&gt;
&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA3' style='18'&gt;ETIQUETA3&lt;/a&gt;
&lt;/tags&gt;" type="application/x-shockwave-flash" src="http://www.swfcabin.com/swf-files/1411057468.swf" id="tagcloud" wmode="transparent" name="tagcloud"></embed>

Cada línea de estas de entre las marcadas en gris, tiene que ser personalizada con la dirección de vuestro blog y la etiqueta que queréis mostrar. Una línea para etiqueta visible.

&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA1' style='18'&gt;ETIQUETA1&lt;/a&gt;

Y de la misma manera que hemos hecho con la dirección de búsqueda de una etiqueta del blog, podemos incluir como URL del enlace cualquier otro destino que queramos.

Como ponemos las direcciones a mano ya no estarán vinculadas a las etiquetas y así podremos construir con este mismo aspecto de esfera móvil, un blogroll, una lista de sitios recomendados o cualquier otro tipo de conjunto de enlaces.

Configuración

En ambos casos (formando parte de la plantilla o como gadget) los parámetros de configuración son los mismos:

• bgcolor=0xFFFFFF: El color de fondo en hexadecimal
• tcolor=0x000000: Código hexadecimal del color del texto del enlace
• hicolor=0xcc0000: Código hexadecimal del color del hover para el texto del enlace
• distr=true: Para hacer una distribución uniforme de las etiquetas por el espacio disponible. False para que no sea así.
• tspeed=100: El número indica la velocidad a la que se desplazarán los enlaces cuando pasemos el puntero por encima. A mayor número, mayor velocidad. Probad con 1500 y veréis qué divertido.
• style="18": Tamaño de fuente en píxeles.

<param name="wmode" value="transparent" />
o wmode="transparent": Para anular el color de fondo y así dejar ver el fondo de la página tras los enlaces.

Tanto object como embed admiten los valores width y height para poder limitar el espacio que ocupará la nube.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter