jueves 21 de junio de 2007Seguro que haciendo tu ruta habitual de blogs te has topado con un blog que tiene un curioso widget (un bloque, para entendernos), lleno de palabras relacionadas con el blog, de distintos tamaños y a veces colores, formando lo que se llama una nube de tags, o etiquetas. 
Si el tipo de letra es grande significa que hay muchos posts etiquetados con esa palabra, al contrario si el tipo de letra es pequeño. Con esto se consigue ver rápidamente qué temas trata el blog y en qué medida. Además de poder ir a ver artículos de un determinado tema, pulsando en la palabra/frase corresondiente.
Si te interesa poner una nube de tags en tu blog blogger sigue leyendo, pues lo vamos a explicar a continuación. Antes de nada debes asegurarte de que usas el nuevo sistema de plantillas, el de blogger beta (aunque ya no es beta). Dentro del panel de administración de tu blog tienes que ir a Plantilla > Edición de HTML y antes de hacer nada pulsar en "Expandir plantillas de artilugios". Antes de nada, guarda el código, por si pasara algo.
El proceso que voy a seguir es prácticamente el mismo que este: http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html (por si prefieres seguir el original).
Primero tenemos que añadir unos estilos CSS. Los colocaremos justo ANTES de ]]></b:skin>
Descargar código que va en esa zona
Ahora ponemos el código siguiente DESPUÉS de ]]></b:skin>
Descargar código que va en esa zona
Por último, y quizá esta es la parte más complicada, tienes que buscar la parte del código que genera los "bloques" de tu blog. En este blog, los bloques (widgets) son los recuadros que hay a la derecha, el perfil, enlaces, afiliados, etc. En el código verás una parte que sigue este patrón:
<b:widget ...>
...
</b:widget>
<b:widget ...>
...
</b:widget>
¡Aquí va el nuevo código que mostraremos a continuación!
Podrás identificar fácilmente un bloque de tu blog buscando por el título, ya que el título aparece dentro de <b:widget title="el título">. Este es el código que debes añadir:
Descargar código que va en esa zona
Ya está, en este momento ya debería salirte tu nueva nube de tags.
Ahora sólo falta modificar algunos parámetros si lo deseas, en el segundo bloque de código verás algunas variables como maxFontSize o minColor, juega con ellas para ver cómo actuan sobre la nube.
by Nenillo
20 Bloggycomentarios:
Esto me ha gustado. Cuando lo vi me gusto mucho como quedaba, voy a probar haber si puedo hacerlo en mi blog.
Gracias por el tuto!
Correción: ya lo haré que ahora me interesa mas actualizar y no tengo mucho tiempo
disculpa como puedo participar en tu blog roll?
gracias
Tienes razón, puedes hacerlo añadiendo un widget html/javascript, y luego buscando su nombre, quizá es algo más sencillo para encontrar la ubicación, pero yo diría que no es necesario, que puedes agregar el código indicando sin necesidad de añadir antes un widget desde el panel de control.
Gracias por esta informacion. Queda barbaro esta nube de tags.
Gracias por todo!!!
esta nube solo se ve en firefox. como haces para el IE???
Esta nube de tags funciona tanto en IE6, como en IE7 y firefox.
Lo hemos probado incluso en Safari 3 y funciona perfectamente.
¿En qué IE lo has probado? ¿En este blog te funciona?
Ya lo he echo y me ha quedado divino BAHAHAHHA
Hola!!
quería hacer notar un pequeño error... el segundo código no está bien puesto o por lo menos a mi no m aparece aunk se puede buscar en la pag que se nombra antes, era simplemnt eso
Muxas gracias por el tuto!!Mu bn hexo!!
El comentario de claudio gonzalez es preciso lo que hice para corregir un error al correr el tercer codigo, pero tambien me encontre con un pequeño error que decia: debe cambiar el id id= Label1 al inicio del tercer codigo que incluimos, yo solo lo cambie por id= Label2, cambie 1 por 2, y finalmente acepte un cambio HTML4.
Yo considero esta forma de ayuda muy especial para entender algunos de los beneficios de los blogs y divertirte haciendo cambios o mejoras en el.
Gracias a al Blog de Uchia y a ti claudio, quedo fina mi Nube de Tags.
Si desean escuchar radio de venezuela en internet, visiten mi blogs, donde retransmito a RADIO GALAXIA.
www.docetreintaycuatro.blogspot.com
Me ha quedao way.
Lo hice asi:
Primero añadi un gadget y le llame nube de etiquetas,y en el cuerpo del mensaje puse Hola.
luego hice el paso 1,luego el paso 2 y despues busqué el widget que habia llamado Nube de Etiquetas y lo borré desde que empieza hasta que se cierra (b:widget>) y pegé el codigo 3,pero como dicen mas arriba le tuve que cambiar donde dice label 1 por label 2.
Luego al guardar te dice que desaparecerá un artilugio y aceptas por que es el que ya no te valia.
Asi me salió a la primera.
Un saludo!
Oye,,no se puede usar tu plantilla modificando los colores y la cabecera?,es que es justo como la quiero y no las encuentro de este estilo.
Un saludo de nuevo.(muy buen blog!)
muchas gracias, paso el dato que me paso, no me aceptaba el codigo porque ya tenia un label1 simplemente reemplace por label2 y funciono.
Pucha, iba haciendo todo espectacularmente bien hasta que guardé la plantilla -todo sin errores- pero cuando me fijo en la vista de mi blog sólo aparece el título Label Cloud y nada debajo.
Debo ser un poquillo inutil porque no me sale bien...hago los pasos que dices pero cuando le doy a guardar plantilla me dice:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".
A ver si me podeis echar una manita por favor...
Anónimo último: enviame un mensaje desde mi perfil y te digo cómo me ha salido. No te lo digo de una porque te tendría que remontar a otra página y no quiero hacer SPAM.
¡Saludos!
como se modifica el color de los tags ?
Muchas gracias, quedó muy bien y a la primera.
se agradece :)
Muchas gracias por tu esfuerzo y esta estupenda guía. No sabía ni me atrevía a intentarlo hasta que di con tu blog.
PD: me ha salido a la primera, ;)
maravilloso!
Publicar un comentario en la entrada