Overblog
Edit post Seguir este blog Administration + Create my blog

Web del Bibliotecario despistado

Información sobre actividades profesionales, bibliotecas y nuevas tecnologías


Nube de Etiquetas Dinámico. ¿Quieres insertarla en tu blog ?

Publicado por Mar activado 16 Mayo 2010, 11:54am

Etiquetas: #Tags, #Web 2.0

Como algunos me habeis preguntado durante estas semanas pasadas,  cómo he puesto la nube de tags en "movimiento" en mi blog, este post va dedicado a vosotros y a todo el que le pueda interesar.

La verdad es que una vez lo ves queda muy chulo....lo encontré navegando por la web en un blog  muy interesante que se  llama "el escaparate" y es muy sencillo, por cierto que sepais que no os va a salir el corazoncito tan mono que he puesto como imagen del post, sino las etiquetas en movimiento que tengo en la parte derecha del blog, pero con vuestros tags.

Una aclaración más....no pongais acentos a las etiquetas de vuestro blog, porque sino  no te reenvían a ninguna de tus entradas......bueno y una vez aclarado esto, os cuento cómo hacerlo:

Lo primero de todo, y esto es muy importante,  guardaros una copia de seguridad de la plantilla, por lo que pueda pasar.....

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

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


[2º Paso] Justo a continuación (debajo de la línea) pegamos el siguiente código html para que la nube de etiquetas aparezca al principio de nuestra sidebar (una vez instalado 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"
Si quereis cambiar estos parámetros por los que mejor se adapten a vuestro blog, tendremos que editar alguna de las partes del código: 

Cambiar el ancho (240px),  el alto (300px) o 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");

    Espero que os haya salido todo bien y que hayais conseguido insertar en vuestro blog la Nube de Etiquetas en Movimiento, es muy fácil. ¿Os ha parecido complicado ?
    Para estar informado de los últimos artículos, suscríbase:
    Comentar este post

    kasiopea 01/29/2010 17:13

    Que bien!! Estaba buscando algo parecido!! voy a ver si me funciona!! Graciasssss

    kasiopea 01/29/2010 17:21

    Muy fácil!! ya está hecho!! Gracias de nuevo!!

    Mar 01/29/2010 18:53

    Has visto que fácil es, Te ha quedado genial !!!
    Me alegro poder haberte ayudado
    Un beso

    Anonymous 01/30/2010 16:35

    Es muy interesante, aunque para mi blog necesitaria otro diseño , ya que el aspecto es mas bien oscuro y misterioso, si encuentro algo interesante lo haré saber por aqui.

    Pau 01/30/2010 21:30

    Oye, esto del blog es muy interesante, voy a ver como funciona.

    Es buena información esta para el blog. Gracias

    Itsaso 02/01/2010 17:42

    GRACIAS MAR!!! Eres un sol!! Me ha quedado genial, mira:
    http://itsaso-comentariosdepasillo.blogspot.com/
    que sería de mi blog sin ti???
    Un besazo!!

    Belen 02/02/2010 09:44

    Muchas gracias Mar!!
    una información superinteresante para mejorar nuestros blogs, lo he probado en blogger y queda genial pero en el blog del máster no lo puedo probar porque wordpress.com no deja editar el HTML de la plantilla.

    Pau 02/02/2010 20:44

    A eso se le llama imponer la moda! jaja

    Mar 02/05/2010 10:57

    Bueno, pues después de todo el cachondeillo con la nube de Tags en clase, veo que al final a casi todos os ha gustado y me alegro.

    Solo aconsejaros a los que teneis el fondo del blog de color que cambieis también el fondo de la nube, vereis como os queda mucho mejor. Os paso los códigos de los colores.
    Y muchas gracias a todos por los comentarios.
    http://html-color-codes.info/codigos-de-colores-hexadecimales/

    Archivos

    ¡Somos sociales!

    Ultimos Posts