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
23 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
Hola. Solo queria hacer una pequena remarca que olviadaste mensionar; quizas porque te pareciera obvio. Enfin, lo que en este post NO esta dicho es que, en la tercera parte del proceso cuando el codigo que estamos buscando es:
widget...
/widget
Lo que hay que hacer es lo siguiente. Primero agregamos un elemento ( widget "html/javascript") a la pagina, al que le damos un titulo cualquiera. Luego seguimos los pasos que en el post estan indicados para , copiar (ctrl+c) y pegar (ctrl+v) los dos primeras partes del codigos.
Finalmente; buscamos en la pagina (ctrl+f) edicion html de la plantilla, el titulo que le dimos al widget que antes agregamos, lo seleccionamos entero,
desde widget...
hasta /widget
lo borramos, y lo reemplazamos por la tercera parte de codigo.
Ahora si que la cosa deberia funcionar sin problemas. Espero que no se me haya olvidado nada. Buenas noches y buena suerte con sus nubes.
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!!
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!)
No funciono en mi plantilla de blog. Solo dice nube de tags pero no se ve ningun tag. que puedo hacer???
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!
No me sale, mal explicao
Buena explicacion.. me salio, pero tengo el problema que me sale un chorrizo largo de etiquta y yo quiero algunas cuantas nomas.. como se puede hace eso?
Publicar un comentario