60

Enlaces en forma de nube

Nube de enlaces


Hace unos días he colocado los enlaces "Imprescindibles" de mi menú en forma de Nube. Como podéis comprobar, tienen el mismo aspecto que solemos ver las nubes de etiquetas.
Hacerlo es bastante sencillo solo necesitamos un poco de CSS y algo de "trabajo manual" para colocar nuestros enlaces en un elemento HTML.



[1] Añadimos este código en el CSS de nuestra plantilla, antes de ]]></b:skin>:

/* Nube de enlaces-------*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#da080c;}
#tagcloud .tag2{ font-size:1.2em; color:#7c9fbd;}
#tagcloud .tag3{ font-size:1.4em; color:#a6c4e1;}
#tagcloud .tag4{ font-size:1.3em; color:#0fd580;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }

En text-aling elegiremos la posición del texto de los enlaces dentro del elemento: center=centrados, left=izquierda, right=derecha y en padding colocamos la distancia que queremos desde los lados de nuestra nube al borde del elemento donde la hemos colocado.

He añadido en el código cuatro tipos de tags distintos, por color y tamaño de fuente. En font-size podéis cambiar el tamaño de cada tag (ese es el tamaño que tendrá el enlace) y en color es donde podéis escoger el color del texto de cada enlace.

[2] Guardamos los cambios y en la parte de "Diseño" añadimos un nuevo elemento HTML y pegamos este código dentro:
<div id="tagcloud">
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
</div>

Ahí podéis añadir tantos enlaces como querías mostrar en la nube.
Fijaros que la clase (class=) es lo que hace que cada enlace tenga las propiedades que le hemos puesto antes en el CSS.

Entradas Relacionadas:

60 comentarios:


Anónimo

¡Era a esto a lo que te referías!

XDDDD Ahora veo.... con CSS (sigo preguntándome: "¿Qué no se puede hacer con el CSS?!").^^

Yo, en cambio, me refería a esta página Web.

^_^ Saludos Rosita,

Anónimo

Rosa:

Me gustan estos enlaces en forma de nube. Es una forma más de adornar y a la vez personalizar nuestro blog.

Eso es lo que más admiro de tí...que no te importa compartir con todos lo que tienes en tu propio blog. La gran mayoría de las personas no son así.

Gracias en nombre de todos.

Lia.

Anónimo

Y como le hago para que quede asi pero mis tags o etiquetas comunes, en forma de nube???

Anónimo

Fernandooo1, si era esto :D pero me he guardado la web que me dices para verla con tranquilidad más tade...tiene muy buena pinta :-L

Anónimo

Ligia, a mi no me importa compartir cualquier cosa, ni siquiera me molesta que me copien incluso la plantilla entera :D soy así...

Anónimo

Anónimo, lo tengo publicado en el blog, ahora mismo no recuerdo donde, usa el buscador que estoy segura aparecerá.

Yo misma

Una verdadera chulada... seguro que lo uso para algo, seguro... Queda precioso!!!

Anónimo

Hola Rosa!
Hace un par de días que conocí tu blog de ayuda y de verdad te tengo que agradecer todo lo que estoy aprendiendo contigo.

Una duda en cuanto a la nube de tags (me ha encantado! llevo buscándola tiempo!)la he colgado y me salen los tags pero al clikar no enlazan con nada, me dice que el blog no existe, y sin el la url del sitio pongo la dirección del blog me da error ¿qué tengo que hacer para que los tags vayan directos a su correspondiente entrada?
Por si te sirve de algo, el blog en el que colgué la nube recién lo abrí ayer...
de momento dejo la nube "conviviendo" con las etiquetas tradicionales hasta que me termines de aclarar la duda, si te es posible.
Gracias de antemano, un beso!

Anónimo

Ay querida Rosita, eres tan genial maestra que no me hizo falta que respondieras! hice feedback de tu explicación ¡y salió todo redondo! puedes entrar a mi blog si quieres y echarle un vistazo a mi (aún) "mininubecita" y ya que estás, pincha en el primer tag y compruebas lo bien que funciona ;)

gracias mil otra vez!
besos, Mary

Anónimo

la de arriba soy yo que me puse nerviosa por la emoción y no sé qué botón omití!

Unknown

ROSI HOLAAAA
Es un encanto entrar a tu casita, no te dije que las nubecitas que están donde dejamos los comentario están muy bonitas!!!.
Los que te leemos sabemos que compartes absolutamente todo!!!.
Preciosa tengo que hacer pequeños cambios y NO TENGO TIEMPO!!!, el trabajo en la casa me lleva mucho tiempo, mis niñas, mi perra JAJAJA, Lola es una hijita más.
Yo me entretengo con las nenas que puedo crear y no sé si puedo competir con vos, veremos, veremos...Mis besos y abrazos perfumados!!!

Anónimo

Yo misma, pienso como tu ¡se ve preciosa! :D

Anónimo

Mary Lovecraft, te han quedado muy bien y, por cierto, que plantilla más alegre la tuya. :D

Anónimo

Graciela , ay ese tiempo que nos "ahoga" a todos!

Lolita, jeje, lo mio es una gatita, se llama Zizzu y es la niña de mis ojos, como no he tenido hijas, pues eso, mi nena. :-L

Avalon

Rosa, una vez más mil gracias!!!

Anónimo

Hola Rosa!

Debo Felicitarte una vez más por tu excelente blog... gracias a ti he logrado convertir la plantilla Minima Black en lo que se ve en mi blog en estos momentos... y el resultado me ha gustado mucho
(http://fuegoyacero.blogspot.com/)

quisiera preguntarte... ¿como puedo hacer para que un video de youtube (por ejemplo) publicado en uno de mis posts quede flotante a la izquierda, en linea con el texto?

Gracias de antemano...
Gracias por darte el tiempo de compartir con nosotros la enorme cantidad de trucos que conoces!

Anónimo

Adrián, como supongo que será para unos determinadas entradas, podrías usar una tabla, a ver que tal...

<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI COLOCAS EL CODIGO DEL VIDEO</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO QUE VAS A MOSTRAR</p> </table>

Anónimo

El dueño, gracias a ti!

Anónimo

Ligia,si se puede, ese menu que dices de arriba,es una "Nube de etiquetas" y según los colores que escojas así se ve, yo he preferido usar los mismos tonos...
Mira como se puede hacer aquí:
http://elescaparatederosa.blogspot.com/2008/01/nube-de-etiquetas.html

Anónimo

Gracias, Rosa.

Voy a tratar de ponerlo.

En otro orden de ideas...Que haces despierta a estas hora?

Lia.

Ana

Hoy no vengo con ningún problema (para variar), hoy vengo a desearos a todos y en especial a ti, Rosa, un feliz día de internet. Un saludo paisana.

Anónimo

Ligia :D:D estaba llegando de fiesta... :-$

Anónimo

Ana, gracias cielo y mil x mil besitos:-L

Unknown

Muchas gracias por el enlace Rosa, todo un placer. Saludos!!

Anónimo

Gracias a ti Rosa me acabo de hacer una barra de navegación debajo de la cabezera chulísima mirando esta entrada: http://elescaparatederosa.blogspot.com/2007/04/men-horizontal-para-el-blog.html

Gracias de nuevo Rosa! :-o

Cale

Gracias Rosa! Muy buen dato, ya mismo lo implemento. :)
Saludos,

Codi Global

Muy bueno, con tu permiso seguro que lo utilizo, gracias por tu gran ayuda

Recursos para tu blog - Ferip -

Hola Rosa, qué bueno esto!
Ya lo estuve probando y lo voy a usar.

Gracias!

Anónimo

Juanjo, pues es cierto, te ha quedado muy chula ;-)

Anónimo

Ferip, gracias a ti! :-L

Anónimo

hola rosa
es rony mota
primero saludos a t y a tu gran numeros de seguidores.
segundo
mi inquietud por saber que es Fevvy
mi ra mi nube , haber que te parecey tambien la imagen para mostrar

te saluda

rony mota

Anónimo

Rony Mota, puedes ver algo sobre Feevy aquí:
http://elescaparatederosa.blogspot.com/2007/05/ultimos-post-de-otros-blog-en-la.html

Anónimo

Hola Rosa, muchas gracias por la información, estoy sumamente agradecido, el 60%de mis blog están hechos gracias a tu ayuda. Me he enviciado y sigo preguntandote, disculpa por lo pesado y por la ignorancia. Para poner un dibujo o foto dices que tengo que depositarlo en un sevidor para que me de la web y así despues redireccionarlo creo que he entendido bien. Asi despues podré ponerlo en la cabecera del blog segun tus instrucciones que son bien claras. Ahra cuando he entrado a la web que has recomendado como es en ingles no he sabido ver como hacer ese procedimiento, existe alguna web en español? Muchas gracias

Anónimo

¡Saludos Daniel!

Si la imagen quieres ponerla en el header (cabecera) no hace falta que la subas a ningun sitio:


http://elescaparatederosa.blogspot.com/2007/04/imagen-de-cabecera-opcion-de-blogger.html

MARTA

Hola Rosa, es fantástico tu escaparate!! Felicidades. Por cierto, he insertado las nubes en mi blog, queda bien pero no encuentro la paleta de colores para poder modificarlos, y queda un poco soso.
(Por cierto te he colgado en una nubecita ;))
Gracias

Anónimo

MARTA, alaaaa como los angelitos, colgada en una nube :D

Dices que no encuentras la paleta de colores...pues en mi nube creo que hay un par de ellas. :-L

DoN CeSaR

Hola Rosa, que se supone que debo poner donde dice TEXTO DEL ENLACE ??
Otra pregutna, con esta nube le puedo poner los colores que quiera y un numero limitado o sea el que yo quiera de las etiquetas a mostrar ?? Por ejemplo las mas comunes???

Muchas gracias de antemano

DoN CeSaR

Jejejeje perdon por mi estupides ahora entendi, pense que era NUBE DE ETIQUETAS jajajaa mala mia disculpa, entonces lo puedo utilizar para las personas que enlazo, mmm que bien, gracias

DoN CeSaR

Ya lo puse en mi blog y me quedo de maravillas jejeje :D gracias muchisimas gracias :D

Arturo

Muy buen Blog. Esta nube de tags personalizada la andaba buscando..gracias

Anónimo

Muy bueno tu blog, todo es muy interesante en especial esto me sirve mucho, estare a menudo por aqui, gracias

Anónimo

Dario, las veces que quieras, por aquí andaré :-)

Marlon Melara

Gracias Rosa, una vez más me ha ayudado tus consejos. Tu blog es muy valioso para muchos.

Anónimo

Marlon Melara, gracias, de verdad:-)

TodoGospel by Rachel

Hola Rosa!Yo usé este método pponer en uno de mis blogs y queda muybien... Quiero saber como se hace p q se vean la cantidad de post o sea un tooltip en cada enlace asi como vos tenés arriba q se ven la cantidad de post en cada uno. Gracias!! Aaa y si se puede aplicar el efecto de nube de etiquetas en movimiento!!??

Anónimo

Yaquee, puedes hacerlo así:
http://elescaparatederosa.blogspot.com/2007/01/texto-opcional-para-un-enlace.html

TodoGospel by Rachel

Muchas Gracias Rosa!!! Quedó mucho mejor!!

Amazona Blanca

Hola Rosa,

Lo primero saludarte, hace tiempo que hice algún comentario en este tu maravilloso blog de ayuda. Decirte que gracias a él y a ti, he conseguido poner en marcha dos proyectos muy especiales. ¡Gracias, sin este blog no hubiera sido capaz!

Me gustaría que te pasaras por ellos y me dieras tu opinión, seguro que sobra o falta algo que yo, sin ninguna experiencia, no alcanzo a ver. Te voy a escribir un correo al email que indicas de lejaniaimposible para dejarte los enlaces y puedas decirme algo, será un alago para mí tu opinión al respecto.

Sobre esta entrada, mi pregunta es si sirve para poner como tu tienes en tu sidebar el cuadro de Directorios con banners?

Gracias de nuevo por todo.
Un beso.

Anónimo

Amazona, no para eso no, perdona, es que se me había olvidado corregir la entrada y antes si tenía los enlaces en mi sidebar...ahora están en una entrada, puedes verlos pinchando en "Imprescindibles" en el menú de arriba.

Los botones de los directorios se consiguen registrando tu blog en esas páginas, si pinchas en cada botón (no todos) te llevan al directorio en cuestión.

Amazona Blanca

Hola Rosa, ya entendí y ya me he puesto manos a la obra. Gracias por tu pronta respuesta. Cuando quieras puedes mirar como está quedando.

OGFlanagan

Rosa muchísimas gracias de nuevo. He logrado poner los enlaces en forma de nube. No lo he hecho en el blog del peque porque de momento no tengo muchos enlaces sino en el de la mami por eso mi comentario aparece con otro nombre.
Eres un sol!!!!! voy poco a poco pero estoy aprendiendo.
Mi blog http://ogflanagan.blogspot.com/

Anónimo

Ольга ¡Qué bien! :-L

Anónimo

Hola Rosa: ¡¡Felices Fiestas!!!
y para continuar una nueva pregunta: coloqué la nube de enlaces a mi blog, cambié los colores, los primeros 4 aparecen con los colores asignados, fui agregando otros pero estos aparecen con tamaño de letras distinto pero el color es el mismo. ¿cómo puedo arreglarlo?
Cariños

Anónimo

Elsa, en las nuevas líneas cambia el color en el código, o sea, sustituye color:#0fd580; por el código para el nuevo color.

Anónimo

Gracias Rosa, lo pruebo...y te cuento. Se que en alguna entrada de tu blog leí como hacer un blog de prueba pero ahora no lo encuentro. ¿me podrías dar detalles? Quiero cambiar la plantilla pero todavía no me animo jaja. Por ahí lo hago en el blog de prueba.
GRACIAS POR ESTAR SIEMPRE!!!

Anónimo

Elsa, para hacer un blog de prueba, solo tienes que ir a tu panel, a la página de acceso (escritorio)donde se muestra el nombre del blog que ya tienes y allí hay un enlace que dice "crear un blog".

Unknown

Mi blog se demoraba tanto en cargar que puse todos mis enlaces en esta nube ;) y se ven preciosos :) me gustó mucho!
Muchas gracias^^
que tengas una linda semana :)

besotes en mi abrazo anaranjado^^

Anónimo

Σ=o) Pau Tienes demasiados amigos gatunos en el blog ja,ja,ja, tendrías que dar alguno en adopción.
¡Un beso! ;)

El Coronel

Gracias Rosa, eres grandiosa hasta en la adversidad.

Paloma

Acabo de agregarlo a mi nuevo blog y me ha quedado bien!!

Un beso.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S