Nube de etiquetas en movimiento

Hace un par de días que he colocado casi el final de mi sidebar una nube de etiquetas "en movimiento" y muchos de vosotros os habéis interesado por la forma de aplicar la nube en vuestro blog, así que paso a explicaros como conseguirla...

[Paso 1] Nos situamos en nuestro panel de Blogger "Edición Html" y sin expandir las plantillas de artilugios localizamos esta línea de código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

[Paso 2] Justo a continuación (debajo de la línea) pegamos el código para que la nube de etiquetas se muestre al principio de nuestra sidebar (una vez instalado el elemento podremos luego moverlo como cualquier otro gadget):

<b:widget id='Label50' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Si todo ha ido según lo previsto, ya podremos ver en la sidebar de nuestro blog la nube de etiquetas, estaremos entonces listos para adaptarla a nuestras necesidades.

Por defecto la nube presenta estás características:
  • Width (ancho) 240px
  • Height (alto) 300px
  • Color de fondo blanco
  • Color de texto gris
  • Tamaño de la fuente del texto "12"
 Para cambiar estos parámetros por los que mejor se adapten al estilo de nuestro blog, tendremos que editar alguna de las partes del código:

  • Cambiar el ancho (240px) y el alto (300px) de la nube:
 var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
  • Cambiar el color de fondo de la nube (#ffffff):
 var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
  • Cambiar el color del texto (333333 manteniendo delante el 0x tal cual está):
so.addVariable("tcolor", "0x333333");
  •  Cambiar el tamaño del texto (12):
 so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Visto en:  Blogger Buster
Basado en una idea original de:  Roy Tanck

0 comentarios:

Publicar un comentario