Nube de etiquetas en flash

Buenas, pues he andado buscando esto en internet, el como hacerlo y demás y he encontrado unas webs intersantes () que explican como hacerlo, aún así, tal y como soy yo, único en mí especie, haré yo el propio manual de como hacerlo.
Bueno una captura de cómo queda:



*Es completamente interactivo, quizás en una grán nube el clickado se hace un poco espesito y difícil, pero es muy atravtivo a la hora de ver un blog así, le dá un toque personal y profesional que a todos nos gusta, además, para que nos vamos a engañar, a todos nos gusta ver girar cosas.




Bueno, pues vamos al lío:
Blogumus: Es un script hecho por bloggerbuster (dicho sea, el script que usaremos hoy y ahora), él cual nos permite, facilmente crear esta nube, muy parecida a la de wordpress, sin la necesidad de saber programar scripts, ya que son tan generosos que nos lo dan hecho para que nosotros hagamos boton derecho>copiar.

Instalación:

  • Vamos a Diseño -> Edición de HTML
  • Veremos un gran cuadro, con el cual deberiamos estar algo familiarizados ya (imagen derecha, click para ver en grande)
  • Allí, buscamos la siguiente linea:
"<b:section class=' sidebar' id='sidebar' preferred='yes'> " (sin las comillas).
*Para una búsqueda mas ágil, puedes hacer CTRL + F (en firefox, en el resto de exploradores no recuerdo como es, le darías edición>buscar en ese caso).
  • Justo después de esta línea hay que copiar el código de script, OJO DESPUÉS, ni antes, ni cuatro lineas más abajo, Después y por supuesto no hay que borrar la linea que hay encima, es decir la que hemos buscado en el paso anterior (lo pongo porque no serías el primero que falla en este paso, a lo mejor el segundo, el primero fuí yo (xD)).
Código :

<b:widget id='Label99' 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'>
<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>


/Código

  • Hay que copiar lo que hay entre Código: y /Código, sin estas dos palabras.
  • Dale a Vista Previa, si todo está bien deberías ver una nube como la de la imagen o la de bloggerbuster en la barra lateral (sidebar), ahora, guarda tu plantilla y disfrutalá.

En las proximas entradas os enseñare a modificar tamaño y colores, primero tengo que aprender yo. En bloggerbuster, teneis manuales en la misma entrada que posteo a continuación, pero estan en inglés, supongo que en vagabundia y la blogeria hay algo de esto.

Saludos y disfrutadlo, hasta el proximo manual.

¿Quieres personlaziar tu nube de etiquetas custom super guay ultra chachi piruli y no sabes como? Hazlo realidad



Post relacionados en otras webs:
Bloggerbuster, la blogeria y vagabundia

Comentarios

Entradas populares