Aplicación de Nube de etiqueta por Oloblogger


Hace como 4 años,Roy Tanckideó 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ágenescapturadas 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 eshttp://oloblogger.comuv.com/tagcloud.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.

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 delEscritorio.

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://oloblogger.comuv.com/tagcloud.swf&quot; width=&quot;250&quot; height=&quot;200&quot; allowscriptaccess=&quot;always&quot; &gt;
&lt;param name=&quot;movie&quot; value=&quot;http://oloblogger.comuv.com/tagcloud.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://oloblogger.comuv.com/tagcloud.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" />
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.

-Artículo por Oloblogger. Viitar Sitio.

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.

0 comentarios:

Publicar un comentario

¡Gracias por comentar!

Related Posts Plugin for WordPress, Blogger...