Actualización: El código anterior de la nube no estaba funcionando correctamente, pero ya lo he corregido y ahora ya puedes crear tu nueva nube de etiquetas en movimiento sin problemas.
Seguramente ya habrán visto por varios blogs que ponen sus etiquetas en una nube. Hoy les voy a enseñar no solo eso, sino que además la nube va a ser en movimiento, para que cuando pasemos el mouse por sobre ella las diferentes etiquetas vallan desplazándose, lo que le da un toque muy atractivo.El truco es muy fácil de realizar. Primero nos dirigimos a la Edición HTML de nuestra plantilla (recuerda guardarla antes de hacer cualquier cambio) y buscamos el siguiente código:
<b:section class='sidebar' id='sidebar'
preferred='yes'>
Luego vamos a pegar el siguiente código debajo de la línea que buscamos recién:
<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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Nota: el código está configurado para que la nube de etiquetas aparezca al comienzo de la sidebar. Una vez que está creada podemos cambiarla de lugar a nuestro antojo, solo hay que arrastrarla al lugar que queremos en la sección "Elementos de página".
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), el alto (300px) y el color (#ffffff) 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 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>");
Como verán el resultado es muy bueno, ya que le da a nuestro blog un toque distintivo muy especial.
Fuente
Fuente
41 comentarios:
que lastima que no me haya funcionado, talvez sea porque tengo un tema no de blogger. de todas formas gracias
Seguro que hiciste todos los pasos bien? tendria que funcionar...
oye tengo unpequeño problema ,sale todo bien cuando se abre por 1º vez pero si das click en cualquier etiqueta la nube desaparece y no regresa ni siquiera con f5 o regresando a la pag principal ,si quieres ver puedes pasar por leandroluna08.blogspot.com
gracias mi mail es rios@raul.net.ar
Leandro: que navegador web estas usando? porque yo uso firefox y te cuento que entré a tu blog y anda perfecta tu nube de etiquetas... pude entrar a todas las etiquetas y verlas....
mira com firefox funciona de maravillas pero cuando quieren abrirlo mis amigos con explorer es el asunto que te conte,, bue si puedes ayudarme ,,saludos ,,,y gracias RAUL
leandroluna08.blogspot.com
oyes me agradaria ponerlo en mi blog ago todos los pasos pero nada no me lo pone me pone este mensaje:
NUBE DE ETIQUETAS
blogumulus by roy tanck and armada fani
QUE CRES QUE SEA¿?
DE ANTE MANO GRACIAS
max: si estás haciendo todo bien te tendría que funcionar. Asegúrate de copiar todo ral cual está, y fijate de no saltearte pasos.
ey n ofunciona la nube solo sale al mesaje que dice el otro amigo¡¡¡
Rockalex:
Chekea de no saltearte ningun paso, y de copiar los codigos correctamente, ya que este truco funciona a la perfeccion, solo debes seguir los pasos sin saltearte nada.
ESTA MUY BUENO PERO TIENE DESVENTAJAS PORQEU FUNCIONA CON INTERNET EXPLORES 7 Y NO CON LOS INFERIORES DE MODO PARECIDOCON FIREFOX
A mi me sirvió en Firefox y Explorer, quedo muy bién, vean:
http://ensenado.blogspot.com
.
ensenado:
Me alegra que te sirviera.
Saludos!
Yo tengo en mi edicion html
b:section class='sidebar' id='categs'
preferred='yes'
b:section class='sidebar' id='blogroll'
preferred='yes'
b:section class='sidebar' id='recent'
preferred='yes'
pero no tengo ningun b:section class='sidebar' id='sidebar' preferred='yes'
qomo lo hago si no sale 'sidebar'?
@AidenCore
Cual es la url de tu blog? asi veo la plantilla y te digo
Suelo poner widgets y he usado muchos de los que recomendás pero al igual que varios de acá sólo me coloca esto:
NUBE DE ETIQUETAS
blogumulus by roy tanck and armada fani
Y la verdad es que me gustaría poner la nube... podrás fijarte que está fallando?
Gracias!
@Blonda
Tienes razón, estuve revisando el código y al parecer no funciona más.
Actualicé el código por uno nuevo que SI funciona, asi que intentalo ahora.
Pueden ver un ejemplo que lo acabo de instalar en mi blog de pruebas: http://www.vidablogger.co.cc/
gracias por avisar, Saludos!
NO FUNCIONA HERMANO,,,, GRACIAS D TODAS FORMAS,
hey gracias amigo creeme que me sirvio de mucho, ya ratos le queria poner esto se te agradece, y para los que quieran ver mi blog la direccion es:
http://detodo-sv.blogspot.com/
creanme que les gustara el blog, espero lo visiten y bajen y pidan lo que deseen ;)
Hola!!!
lo puse en mi blog y se ve lindo, te agradezco por publicar esta entrada.
pero sabes que intento agrandarlo, pero no se puede, mi blog tiene dos columnas, y solo queda en una de ellas, lo agrande a 300x300 para que quedara posada como el tuyo por sobre las dos columnas pero no me deja :(
me ayudarias?
gracias.
@Nonono
El problema es que mi blog tiene una columna simple mas arriba y 2 columnas separadas mas abajo, por eso no te queda igual.
Vas a tener que dejarla del ancho de tu columna porque sino quedara sobresalida.
facil, si funciona en templates Hibridos, que sean wordpress a blogger, el template agosto es muy pero muy facil y versatil de modificar vallan a mi blog y mierenlo por si mismos, tambien puedo personalizar templates mas sofisticados solo maden por correo hasta pronto.
Saludos:
He tratado de colocar la nube de etiquetas en mi blogg bellavistakindergarten.blogspot.com. A pesar que llevo a cabo todas los pasos, no sale.
me sale un recuadro blanco :(
@Priscila
A que te refieres con que sale un recuadro blanco? Te dice que se produce algun error? o sale solo el recuadro?
Hola muchas gracias me servio de mucho tu información: quedo bien http://www.ranjosfox.blogspot.com
Uso el navegador Google Chrome y normal de lujo.
HOla ,
Tengo el mismo problema que priscilla, un recuadro blanco, no da error.
te dejo mi url de pruebas. http://provawebampa.blogspot.com/
Me gustaría mucho poner este efecto en mi web
No me aparece b:section class='sidebar' id='sidebar'
preferred='yes' ¿que puedo hacer?
mi blog es elultimoze.blogspot.com
@Ze hugo
Intenta buscando el mismo codigo pero usando comillas dobles. Quedaria algo asi:
class="sidebar" id="sidebar"
preferred="yes"
Hola! La nube quedó bien, pero tengo dos preguntas: 1- Cómo le agrego más etiquetas; y 2- No entiendo qué hay que hacer para cambiar el color de las palabras de la Nube. Gracias!! Te paso la dirección de mi blog: bienvenidosviajerosdeltiempo.blogspot.com
@Anónimo
Las etiquetas se agregan solas. En cuanto al color, fijate en el codigo ahi tenes que cambiar los parametros que mencione mas arriba.
Hola,
El fondo de mi blog es negro y cuando he puesto la nube de etiquetas me salía en color blanco y las etiquetas en azul. ¿Cómo puedo hacer para que salga el fondo azul negro como el blog y las etiquetas en azul turquesa?. Muchas gracias por la información que nos ofreces para hacer más atractivos nuestro espacio en red.
Un saludo
Hola muy buenas. He seguido los pasos correctamente y no me sale nada, bueno si. Me sale esto
blogumulus by roy tanck and armada fazani
¿Me podéis ayudar?
MUCHAS GRACIAS por esta información, en realidad yo sabía como agregar la nube de tags al blog, pero no sabía como cambiar el color de fondo y del texto. Aquí esta muy bien explicado, logre lo que quería al primer intento (y la nube se ve genial en mi blog!!!)Dejo la dirección de mi blog para que vean el resultado:
http://ganabuxes.blogspot.com/
Sólo un consejo, agrega este link a la información: http://www.usuarios.sion.com/pauluk/coloreshtml.htm , aquí vienen los códigos de varios colores, en lenguaje HTML.
Saludos
Gracias x la info.. pero no consigo saber q archivo editan.. si no es mucha molestia x favor diganme lo necesito... Gracas
Hola.
No encuentro el primer codigo
QUE HAGO?
Si alguien me ayuda, le agradeceria infinitamente.
http://grupopueblolibre.blogspot.com/
mail: juanpablo_okseniuk@hotmail.com
GRACIAS
Hola!
He intentado ponerlo pero no me sale en mi plantilla ningún class="sidebar" id="sidebar"
preferred="yes" lo probé así con dos comillas ya que con una no me funcionaba y leí un comentario que dejaste que lo probaran así pero nada, no me funciona, ni con una, ni con dos, jeje. ¿Cómo tendría que hacerlo entonces?
Gracias!
A mi tampoco me funciona... que pena
man no encuentro esta opcion
Hola, me pasó igual que AidenCore, no me aparece el primer código en mi plantilla.
Mi blog es renacuajotripolar.blogspot.com
Sería genial si me ayudas, ¡gracias!
Hola,
Me encantaría poner en mi blog la nube de etiquetas, pero no hay manera, sigo las instrucciones pero sólo logro que me salga el siguiente mensaje:
"Labels
Blogumulus by Roy Tanck and Amanda Fazani"
Este es mi blog: http://losangelestambienvistendeprada.blogspot.com/
A ver alguien me puede echar una ayudita!
mil gracias!
Hola, está muy bien el post, pero ¿podrías decirme cómo conseguir que el fondo de la nube de etiquetas sea transparente? que no sea blanco, es que en mi blog queda muy mal
Gracias
Publicar un comentario en la entrada
Lea las reglas:
Todos los comentarios serán leídos y moderados previamente.
Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.
OBS: Los comentarios de los lectores no reflejan las opiniones del blog.