sábado, 20 de junio de 2009

NUBE DE ETIQUETAS

Os voy a mostrar una forma muy sencilla de hacer una nube de etiquetas. Este recurso nos permitirá ofrecerle a nuestros visitantes las etiquetas de una forma mas atractiva que como lo hace blogger, ya que podremos definir el tamaño y color de los títulos de los enlaces. Es un recurso muy recomendable ya que nos permite mostrar la información de una forma personalizada y llamativa. El resultado que otendremos será algo como lo siguiente:

En primer lugar:(Un poco de estilo)

Deberemos ir al código de nuestra plantilla y colocar el siguiente código justamente encima de la linea donde pone ]]></b:skin>

/* Nube de Etiquetas*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#CC0700;}
#tagcloud .tag2{ font-size:1.1em; color:#CC9C00;}
#tagcloud .tag3{ font-size:1.3em; color:#C2CC00;}
#tagcloud .tag4{ font-size:1.5em; color:#00C2CC;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }
/*FIN Nube de Etiquetas*/
Segundo paso:(Entendiendo el código)

Antes de continuar copiando código vamos a entender lo que acabamos de copiar, que se resume a lo siguiente:

padding
: es la distancia en píxeles de la separación entre vínculos.
font-size: tamaño de la letra.
color: color del del vínculo. Consultar colores.

Una vez sabemos lo que hemos copiado, continuaremos siguiendo los pasos, luego podremos volver a este punto para personalizarlo teniendo en cuenta para que sirve cada atributo.

Tercer paso:(Crear la nube)

Para ello crearemos un gadget de tipo HTML/Javascript y añadiremos en su interior el siguiente código:
<div id="tagcloud">
<a href="Url_del_enlace" class="tag1">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag4">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag3">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag2">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag1">Texto Vinculo</a>
</div>
Como podemos observar son 5 lineas prácticamente iguales, lo único que cambia es el número del tag, por tanto si lo que queremos es clasificar 10 etiquetas tendremos que añadir 10 líneas de la misma forma, únicamente modificando el número que acompaña al tag. Yo por ejemplo combino el número del tag como podéis observar la secuencia es 1,4,3,2,1.., podéis insertarlo en el orden que queráis para darle el efecto deseado. Tendréis que añadir la Url del enlace de la etiqueta correspondiente y el texto del vínculo por cada etiqueta que queráis añadir. Insertados unos cuantos con su respectiva URL es cuando podréis observar el resultado y por tanto personalizar correctamente la nube retrocediendo al primer paso y modificando los atributos correctamente.

7 Comentarios:

Unknown dijo...

Muy bueno este tutorial, me gustaria saber como se pone una ventana como esta de comentarios para mi blog,ya que he probado y no me sale .gracias por todo.un saludo

caxitos dijo...

Thomsom Para crear 'una ventana' como dices para los comentarios es algo complejo, se trata de modificar el código de la plantilla, ahora no tengo mucho tiempo pero prometo hacer una entrada explicando paso a paso como modificarlos, deja si quieres la url de tu blog y yo te aviso cuando haga la entrada. Un saludo!

Oskar E. dijo...

Excelente amigo estoy iniciando mi blog de arte amazonico y me parece genial insertar esta nube en mi sitio. gracias y que dios te bendiga

Merlina dijo...

De última puse esta nube. Espero que no se deshaga como la otra. Me ayudas con el cuadro de comentarios?. Un saludo.

Lady Jones dijo...

HOLA CAXITOS, JEJE, VUELVO A LA CARGA... ESTOY OJEANDO ESTO DE LA NUBE DE ETIQUETAS... HE DESCUBIERTO LA EDICIÓN HTML, SOS! SI HAGO UNA COPIA Y LUEGO TODO SALE MAL?? DONDE BUSCO LA BUENA??? BUENO, PUES ESO, QUE LO VOY A INTENTAR. LA IDEA ES QUE LUEGO QUEDE COMO LA TUYA... ME TIRO A LA PISCINA Y ESPERO TENGAS FLOTADORES DE SOBRA, EH?? ESPANTAMOS GAMUSINOS, PERO NO SÉ SI SABRÁS SACARME A FLOTE DE ESTA...AY!!!
CIAO, MERCI.

caxitos dijo...

Un saxofonista..JAJAJ Sin duda eres unica comentando, concretamente insertando esta nube de etiquetas poco puedes fastidiar, lo único si no te funciona que no tiene por que!! eliminas el código insertado y tan tranquila!! Tirate a la piscina y cualquier problema que te surja preguntalo! no te quedes con nada en el tintero! espero que te salga a la primera :) ya me cuentas!

Publicar un comentario

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.