Nube de etiquetas 3D: Blogumus sigue funcionando | Oloblogger Hace como 4 años, Roy Tanck ideó un sistema para que las etiquetas de un blog pudieran verse en un ...

23 de octubre de 2012

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:




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
Copy URL

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

follow us in feedly

17 comentarios :

  1. Muito legal esse modelo com efeitos funcionou direitinho, parabéns pelo artigo e pelo blog
    Abraços

    ResponderEliminar
  2. Hola Oloman.
    En breves me animo a colocar el gadget, siempre me llamó la atención y al verlo por aquí, me ha vuelto a picar el gusanillo ;)
    Gracias de nuevo.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. El enlace de descarga que proporcionas no chuta, ya le echarás un ojo.
      Un saludo.

      Eliminar
    2. Ya está reparado el link. Es que haciendo limpieza lo moví del sitio ;)

      Eliminar
    3. Hola Oloman.
      Desde hace un tiempo que no funciona correctamente la nube, al menos en mi página, por aquí veo que chuta... el caso es que ya no aparece en reproducción automática, aparece estática con un play para darle vida que, una vez clicado, funciona a la perfección.
      Coincidió con la transformación del gadget de presentación (fotos) en una nimiedad, el tamaño disminuyó haciéndose casi invisible sin motivo aparente. El artilugio parece estar en orden pero no se visualiza.
      ¿Puede haber sido pertrechado por blogger en el código?... porque yo no he sido...
      Gracias de antemano, un saludo.

      Eliminar
    4. Por si le sirve, a mi me pasó algo similar y era un problema del navegador con el Flash Player. Volví a instalar el navegador y problema solucionado.

      Eliminar
    5. Gracias Morféo.
      No caí en actualizar el navegador pensando en esto pero sí tuve que reinstalarlo hace poco y no hubo arreglo milagroso :(
      En cuanto a las actualizaciones del flash player, andan al día, al igual que el resto de aplicaciones, extensiones, etc...
      Más bien creo que fue relacionado con algún cambio de código de blogger incompatible con lo que sea, a la par, falló también el reproductor de imágenes de blogger y también he intentado lo que está a mi limitado alcance, sin éxito.
      Agradezco su ayuda Morféo, espero poder encontrar solución al tema ya que la nube en "pause" como que no dice mucho ;)
      Un saludo.

      Eliminar
    6. En mi caso el problema me lo daba en Chrome, y se solucionó al reistalar el navegador. Espero que logre solucionarlo pues es un verdadero fastidio que no se reproduzca automáticamente.

      Eliminar
    7. Gracias Morféo.

      Tapicero, no sé el origen del problema, así que no puedo aportar nada más.

      Eliminar
    8. Gracias Morféo.
      Según parece, creo que tendré que conformarme con la nube estática... :(
      Agradezco tu respuesta Oloman, es una lástima...
      Un saludo.

      Eliminar
    9. Hola de nuevo.
      Acabo de abrir mi blog con Edge y todo se visualiza como debiera (exceptuando el tembleque de sidebar y del fondo cuando navegas un poco), debe ser problema de Chrome...ahora que me he pulido el gadget de presentación o_O

      Eliminar
  3. Gracias por la ayuda,me ha servido bastante (:

    ResponderEliminar
  4. Estimado Oloman:

    Al no tener otro medio, a través del cual ponerme en contacto contigo, me he visto en la obligación de escribirte a manera de comentario en esta entrada, para hacer de tu conocimiento que mi blog ha reconocido al tuyo obsequiándole el siguiente premio: http://www.sexualidadenfamilia.com/2012/10/el-blog-hablemos-de-sexualidad-en.html

    ¡Felicidades!, ¡Sigue adelante con tu trabajo!

    ResponderEliminar
  5. El link de descarga ya no funciona, da error 404. Justo necesitaba el código, pues la dirección original donde estaba alojado se cayó
    http://swfcabin.com/swf-files/1411057468.swf

    Si puede pasarme el código se lo agradecería. Gracias

    ResponderEliminar
    Respuestas
    1. Prueba ahora Morfeo. Saludos

      Eliminar
    2. Gracias!!! Descargado. Un fuerte Abrazo.

      Eliminar