Blogumus » Nube de etiquetas en movimiento


Hoy vamos a ver cómo crear una nube de etiquetas con un efecto muy especial, pues las etiquetas están en movimiento, tal como pueden apreciar si pasan el mouse sobre la imagen.



Ahora vamos a ver como pueden hacer para conseguirla siguiendo los siguientes pasos:

1.§ Vamos a Diseño - Edición de HTML y buscamos el siguiente código:

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

2.§ Debajo del código que buscamos en el punto 1.§ , pegaremos el siguiente 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'>



    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

        &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;


        &lt;param name="bgcolor" value="#ffffff" /&gt;

        &lt;param name="flashvars" value="tcolor=0x000000&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='12'><data:label.name/></a>

</b:loop>

&lt;/tags&gt;" /&gt;

        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;


    &lt;/object&gt;


  </div>



  <b:include name='quickedit'/>

</b:includable>

</b:widget>

Antes de guardar vemos si ha quedado bien en Vista previa, y luego damos click a Guardar!

3.§ Este paso es opcional, la nube funcionará correctamente con los pasos anteriores, este paso sólo es para personalizar un poco la nube.
La nube que instalamos, tiene los siguientes valores o características que podremos modificar, tal como se indica teniendo, en cuenta que sólo deberemos de modificar lo que está en cursiva:

  • El ancho es 250px, para cambiarlo buscaremos en el código width="250"

  • La altura es 200px, para cambiarlo buscaremos height="200"

  • El color de fondo es blanco, para cambiarlo buscaremos value="#ffffff"

  • El color de texto es negro, para cambiarlo buscaremos value="tcolor=0x000000&

  • El tamaño de letra es 12, para cambiarlo buscaremos style='12'

Y éso sería todo, si hay alguna duda o problema estaré gustosa de ayudarlos.

Referencia : Blogger Buster

13 opinaron:

G

Me sirvió muchísimo tu tutorial !

Eres la mejor .

Besos :)

Responder
Yessmi

Me ha quedado divina la nube de etiquetas en mi blog :)

Graciassssss

Responder
squirrel

Gracias por esta nube de etiquetas en movimiento, tiene un aspecto estupendo :)

Responder
Jéssica YK

» G: gracias :)

» Yessmi: la he visto y ha quedado muy bien.

» squirrel: sí la nube tiene un aspecto especial.

S@lu2

Responder
Adrián Aratan

Genial, es una nnuble buenísima.

Responder
Adrián Aratan

Disculpa, quise decir "nube" y no "nnuble" :)

Responder
Jéssica YK

Adrián Aratan : sí, la nube se ve muy bien y descuida, a veces nos trabamos con el teclado :)

S@lu2

Responder
juan carlos

Muy buen tutorial!

Responder
Genial
Este comentario ha sido eliminado por el autor.
Responder
Genial

Ha funcinado de maravilla en mi blog de cocina!!!

Gracias y abrazo fuerte

Responder
Ing. Daniel

a mi no me funcionaaaa porque?
http://acapulcocool.blogspot.com/

Responder
Matias Lorencex

yesika tengo un problema e buscado ese codigo en mi blog expandiendo y sin expandir artilujios pero no me sale hay alguna otra manera de agregarlo a las etiqetas en movimiento o no por favor respondeme a anunciate-aqui@hotmail.com
o deja un comentario en http://descargoafull.blogspot.com

Responder
Jéssica YK

» Ing. Daniel:
Puede que haya algún conflicto entre este código y otro que tengas en tu blog ( quizás uses alguna librería Api u otra; si no es así, avísame para poder ayudarte.

» Matias Lorencex:
Como tu plantilla no es una creada por Blogger, puede que esté el código pero con otro nombre; en todo caso, puedes enviarme una copia de tu plantilla a mi correo para analizarla y ver con qué nombre está el código.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio