Blogumus: una nube de etiquetas animada
Ya hacía meses que tenía ganas de meterle mano a la lista de etiquetas de este blog. En mi caso particular tematizo los artículos de una manera particular, haciendo referencia a una web que pueda tener relación con el mismo. Para éste en concreto uso "blogspot.com", por ejemplo.
Como nos pasa a muchos blogueros, la lista de etiquetas se va alargando como la lista de la compra del supermercado así que mi objetivo era esa nube tan "maja" (aunque tan poco legible) que ves a tu derecha, a media página. Aunque ya había probado varias, siempre había algo que no me terminaba de gustar, bien por algún fallo, bien por su falta de adaptación.
Hoy, de casualidad, me he fijado en la que usa Rayajos en el Aire, así que me he tirado a la piscina de su código de plantilla y allí encontré un nombre, Roy Tanck quién presentaba una adaptación de WP-Cumulus para Blogger denominada Blogumus, publicada en Blogger Buster.
Hechas las presentaciones, entremos al tajo. El código del widget lo puedes encontrar en el artículo de Blogger Buster. Lo instalas sustituyendo íntegramente tu widget actual de etiquetas identificado por algo parecido a <b:widget id='Label99' locked='false' title='Labels' type='Label'>[código]</b:widget>. En el campo title de esta etiqueta puedes definir el título de tu widget, en mi caso Tematizando, si bien también lo podrás hacer en la vista de diseño.
También puedes instalar el widget completo después de tu etiqueta de sección de barra lateral, algo parecido a <b:section class='sidebar' id='sidebar' preferred='yes'>, aunque su nombre puede variar según la plantilla. Es decir, en mi caso, que tengo dos barras laterales, corresponde a la sección r_sidebar, porque así está definido su nombre en la plantilla que uso. Después, en vista de diseño, puedes arrastrar y posicionarla en el orden que te convenga.
Si en tu caso tienes muchas etiquetas y el resultado es una nube muy espesa, puedes seleccionar aquellas que desees mostrar en tu vista de diseño. Por ejemplo yo he desactivado todas las que sólo tienen 1 artículo. Entras a editar tu widget de etiquetas (Labels) en la vista de diseño, seleccionas la opción Etiquetas seleccionadas, luego en Editar y desmarcas las que quieres ocultar.
Puedes hacer algunas adaptaciones a tu propio blog a través de la línea (observa que en el código no tienes comillas dobles (") sino su marca HTML ("):
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
En el primer número puedes modificar el ancho de tu nube de etiquetas, el siguiente modifica el alto. Como la nube tiende a ser esférica pero achatada por sus polos superior e inferior, en el caso de los valores por defecto (240 - 300, más alto que ancho) verás que deja un gran espacio vacío encima y debajo de tu nube.
En esta misma línea puedes modificar el color de fondo sustituyendo #ffffff por el código hexadecimal de tu interés.
Puedes modificar el tamaño base de la letra en la siguiente línea, modificando el campo style, donde indica el valor por defecto "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>");
Observa nuevamente que en el código que copias no hay comillas dobles (") sino la marca HTML que la representa (").
Otro cambio que puedes realizar, si tienes un fondo con una imagen y quisieras que se mostrara debajo de tu nube de etiquetas, es activar la transparencia en este flash animado "descomentando", es decir, quitando las barras de división (//), en la línea:
// so.addParam("wmode", "transparent");
Y para cambiar el código de color del texto usas la línea siguiente (te recuerdo lo de las comillas). Un detalle, la variable tcolor pertenece al módulo flash, por lo tanto no indiques el color usando el formato HTML, con una almohadilla (#) sino con el iniciador "0x":
so.addVariable("tcolor", "0x333333");
Por último avisar que para que el usuario que navegue por tu blog pueda ver esta bonita nube de etiquetas tiene que tener instalado Adobe Flash Player 7 o superior.
Como nos pasa a muchos blogueros, la lista de etiquetas se va alargando como la lista de la compra del supermercado así que mi objetivo era esa nube tan "maja" (aunque tan poco legible) que ves a tu derecha, a media página. Aunque ya había probado varias, siempre había algo que no me terminaba de gustar, bien por algún fallo, bien por su falta de adaptación.
Hoy, de casualidad, me he fijado en la que usa Rayajos en el Aire, así que me he tirado a la piscina de su código de plantilla y allí encontré un nombre, Roy Tanck quién presentaba una adaptación de WP-Cumulus para Blogger denominada Blogumus, publicada en Blogger Buster.
Hechas las presentaciones, entremos al tajo. El código del widget lo puedes encontrar en el artículo de Blogger Buster. Lo instalas sustituyendo íntegramente tu widget actual de etiquetas identificado por algo parecido a <b:widget id='Label99' locked='false' title='Labels' type='Label'>[código]</b:widget>. En el campo title de esta etiqueta puedes definir el título de tu widget, en mi caso Tematizando, si bien también lo podrás hacer en la vista de diseño.
También puedes instalar el widget completo después de tu etiqueta de sección de barra lateral, algo parecido a <b:section class='sidebar' id='sidebar' preferred='yes'>, aunque su nombre puede variar según la plantilla. Es decir, en mi caso, que tengo dos barras laterales, corresponde a la sección r_sidebar, porque así está definido su nombre en la plantilla que uso. Después, en vista de diseño, puedes arrastrar y posicionarla en el orden que te convenga.
Si en tu caso tienes muchas etiquetas y el resultado es una nube muy espesa, puedes seleccionar aquellas que desees mostrar en tu vista de diseño. Por ejemplo yo he desactivado todas las que sólo tienen 1 artículo. Entras a editar tu widget de etiquetas (Labels) en la vista de diseño, seleccionas la opción Etiquetas seleccionadas, luego en Editar y desmarcas las que quieres ocultar.
Puedes hacer algunas adaptaciones a tu propio blog a través de la línea (observa que en el código no tienes comillas dobles (") sino su marca HTML ("):
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
En el primer número puedes modificar el ancho de tu nube de etiquetas, el siguiente modifica el alto. Como la nube tiende a ser esférica pero achatada por sus polos superior e inferior, en el caso de los valores por defecto (240 - 300, más alto que ancho) verás que deja un gran espacio vacío encima y debajo de tu nube.
En esta misma línea puedes modificar el color de fondo sustituyendo #ffffff por el código hexadecimal de tu interés.
Puedes modificar el tamaño base de la letra en la siguiente línea, modificando el campo style, donde indica el valor por defecto "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>");
Observa nuevamente que en el código que copias no hay comillas dobles (") sino la marca HTML que la representa (").
Otro cambio que puedes realizar, si tienes un fondo con una imagen y quisieras que se mostrara debajo de tu nube de etiquetas, es activar la transparencia en este flash animado "descomentando", es decir, quitando las barras de división (//), en la línea:
// so.addParam("wmode", "transparent");
Y para cambiar el código de color del texto usas la línea siguiente (te recuerdo lo de las comillas). Un detalle, la variable tcolor pertenece al módulo flash, por lo tanto no indiques el color usando el formato HTML, con una almohadilla (#) sino con el iniciador "0x":
so.addVariable("tcolor", "0x333333");
Por último avisar que para que el usuario que navegue por tu blog pueda ver esta bonita nube de etiquetas tiene que tener instalado Adobe Flash Player 7 o superior.
Comentarios
Publicar un comentario