Cambiar el diseño de la nube de etiquetas : El Escaparate de Rosa

Estás en: Inicio » Etiquetas » Cambiar el diseño de la nube de etiquetas

Cambiar el diseño de la nube de etiquetas

Hace tiempo ya que es sabido que podemos usar una opción del gadget "Etiquetas" de Blogger, para mostrar nuestras etiquetas en forma de nube.

Se da la casualidad que ayer recibí dos emails sobre el mismo tema: como cambiar el diseño de la nube una vez añadida en el blog, así que veremos en esta entrada como hacerlo.

Una vez añadido el gadget en la sidebar, tendremos una nube de etiquetas con un diseño por defecto que se adapta, más o menos, al del resto de la sidebar.
El gadget mostrará los títulos de las etiquetas con cinco tamaños diferentes, dependiendo del número de veces que la etiqueta es utilizada, es decir, a más entradas con una etiqueta concreta, mayor será el tamaño de esta respecto a las demás.

Para modificar el tamaño, color del texto, separación, etc. de las etiquetas, tendríamos que añadir algunas líneas de CSS en la plantilla, como siempre lo haremos antes de ]]></b:skin>

.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #8b8989; font-size: 10px;}
.label-size-2 a {color: #000000; font-size: 12px;}
.label-size-3 a {color: #4682b4; font-size: 14px;}
.label-size-4 a {color: #dccdc; font-size: 15px;}
.label-size-5 a {color: #6495ed; font-size: 18px;}

Modificaciones

.cloud-label-widget-content {
Controla el diseño del contenedor de la nube, en mi ejemplo las etiquetas se verían centradas y en negrita.
.cloud-label-widget-content span {
Controla la distancia entre las etiquetas, en mi ejemplo 5 pixeles de separación.
.label-size
Ahí controlamos el color de texto y tamaño de cada una de las etiquetas, según las cinco opciones que el gadget proporciona.

Nota:

Aunque en mi caso he utilizó estos cambios incluidos en el CSS tal como indico en la entrada, podría darse el caso de que hubiese que sobrescribir las propiedades para que los cambios se muestren.
En ese caso lo que hacemos, es incluir el CSS a añadir entre <style type='text/css'> y </style> y lo colocamos justo después de la etiqueta <body> de la plantilla.

Entradas Relacionadas:

56 comentarios:

Kooki_Monster XD!!: Muy Interesante... Andaba buscando algo asi para modificar las etiquetas que por default se ven un poco maal jejej

Saludos; 9/7/10
Carol: Muchas Gracias!! y a la primera (no me lo creo ni yo)

se veian muy pequeñas y ahora ha mejorado

Gracias Rosa ;)

Saludos¡¡¡

pd Tipo Fuente en entradas : es posible añadir el comic sans? (para novatos claro)

(disculpa si no procede aqui la pregunta.); 9/7/10
Bilosony2™: Ahora mismo lo pondre en practica :D
porcierto has notado eso nuevo que aparece en el escritorio eso que dice "Seguidores"?? :O es algo nuevo creo yo como las estadisticas...

Saludos!!!; 9/7/10
Eva Flores: muchas gracias por esta receta, siempre que veia las etiquetas me parecían tan insulsas... ahora podré darles el formato que quiera.
Eres una crack!
salut!; 9/7/10
Anónimo: Bilosony2™ Pues no he notado nada...:0 Quizá andan en pruebas de nuevo... de ahí tanto fallo últimamente...; 9/7/10
Anónimo: 4ever Podrías añadir la fuente que quisieras, el problema es que si tus visitas no la tienen instalada en su PC pues no la verán y en su lugar podrían ver cualquier otra "normal"... un consejo que no es mio, sino de los que se suponen saben del tema, suelen decir de la comic sans es la menos recomendable para la lectura de entradas :S; 9/7/10
Carol: Gracias Rosa, lo tendre en cuenta ;); 9/7/10
Anónimo: Rosa, gracias, sencillo de poner en practica. Los colores por defecto me han ido muy bien en Blogtecnia. En Carlos Santias con más tiempo lo implementare y modificare a otros colores.
Buen fin de semana!; 9/7/10
Gerardo: Hola rosa como pongo ese enlace de "Estas en Inicio > Etiquetas > Nombre del Post"

Espero lo añadas esta muy bueno =)

Saludos; 9/7/10
Magoplup: Hola Rosa muy buen blog me gusta mucho tengo unos meses que cree mi blog pero para ser sincero no se nada de blogs todo lo que se lo e aprendido de tus notas sin embargo ahora mismo tengo un problema con mi blog y es que en el momento de buscar en plantillas de artilugios los codigos no me aparecen como los muestras en los ejemplos de pronto es por q aplique una plantilla de las nuevas q vienen con el blog quiero hacer muchas cosas en mi blog pero no se como hacerlas u_u tienes alguna pagina que tenga plantillas elegantes las e estado buscando y no las e encontrado gracias =); 9/7/10
Colombia en Derecho: Quise ponerlo en mi blog, pero lo único que puedo controlar es el tamaño de la fuente. ¿Debe ser así?. Muchas gracias, como siempre, por tu gran trabajo. :P; 9/7/10
Carol: y el color tambien se puede

http://paletteman.com/; 9/7/10
SMB: hola rosa, estoy seguro que tú puedes ayudarme: necesito configurar los resultados de búsqueda de las etiquetas para que, por ejemplo, se vayan mostrando de a 20 en cada página, con la opción de "ver más" resultados (otras 20, etc.)... (acabo de comprobar que lo tienes incorporado en tu blog). Imagino que funciona similar a la paginación de entradas de blogger.

Te agradecería mucho tu ayuda.

saludos.; 10/7/10
Ceci: Hola, quisiera hacerte una consulta, porque ya no se donde buscar ni como solucionar mi problema...

Resulta que quise cambiar mi plantilla y antes de hacer los cambios, guardé la anterior.

Luego, no me gustaba como quedaban las otras plantillas y decidí volver a la antigua que tenía pero SORPRESA! Me doy con que ahora tengo dos cabeceras! y dos "entradas del blog" pero esto no se nota en el blog.

Ahora el tema de tener dos cabeceras me parece rarísimo, porque yo guardé antes mi plantilla y queda feo a la vista, y si modifico una, se modifican ambas. Y no me deja eliminar la extra.

Qué puedo hacer? realmente me angustia no saber solucionarlo sola y te pido disculpas por la molestia, pero podrías decirme que hacer?

Te dejo la url de mi blog para que veas a lo que me refiero.

http://yoteesperabayoteespero.blogspot.com/

MIL GRACIAS!!!!; 10/7/10
Anónimo: Gerardo Aquí lo tienes:
http://elescaparatederosa.blogspot.com/2007/05/breadcrums-siguiendo-el-rastro-del.html; 10/7/10
Anónimo: Ceci.- Lo único que se me ocurre es que subas de nuevo la plantilla, pero no directamente desde "Examinar" sino borrando todo el código de la que ya tienes y copiando en su lugar el de la nueva.; 10/7/10
Anónimo: SMB A decir verdad si tengo aplicado para que se vean un número determinado de etiquetas, y ahora que me lo recuerdas, he de retirarlo, pues ya no sirve... precisamente es como la autopaginación, pongas lo que pongas Blogger mostrará el número que considere y, por cierto, que en mi caso no suelen llegar a 20...; 10/7/10
Aurora: Una duda, ¿cómo hacer para que aparezcan las etiquetas con colores?
A mí me salen todas grises oscuros.; 10/7/10
Pilar Abalorios: Muchas gracias Rosa, como siempre un éxito.

Abuso de tu paciencia y te pregunto (he estado mirando pero no lo encuentro) cómo poner ese simbolo de A+ A- para agrandar o achicar la letra, ando liada con un proyecto para gente mayor y me parece básico poder ofrcerlo así.
Gracias,; 10/7/10
Anónimo: Pilar En breve subiré a entrada al tema... mientras si te corre prisa, creo que en Vagabundia hay algo al respecto...; 10/7/10
Anónimo: Aurora Es lo que explico en la entrada,cambiar tamaño y color...; 10/7/10
Ceci: Gracias Rosa, voy a probar subiendo de nuevo la plantilla, espero que se me solucione!; 10/7/10
Administrador: Muchas gracias Rosa, estaba buscando este truco y no lo había encontrado por ningún lado, pero tu lo colocaste, y estuvo super. ya lo aplique en mi blog(http://palabradelibertad.blogspot.com/) no le hice muchos cambios porque los colores y el tamaño combinaban perfectamente con el contenido del blog.; 11/7/10
Ceci: Hola Rosa, mi novio me pudo solucionar el tema de tener dos cabeceras, ahora ya tengo una sola.

PERO, cuando voy a diseño del blog, sigo teniendo dos "entradas del blog" entonces, al llegar al último post, se vuelven a repetir todos los post desde el primero

Como soluciono esto? espero hacerme entender y gracias por tu ayuda.; 11/7/10
Anónimo: Ceci.- Esta claro que tienes códigos duplicados... y podrías tratar de solucionarlo como estás haciendo, uno a uno, siempre que sepas lo que haces, sino lo mejor cargar la plantilla, pues me temo que esos que dices no sean los únicos errores...; 11/7/10
Marcelo: gracias Rosa tu blog me ha servido de muchísima ayuda he inspiración y nunca te he agradecido por eso saludos...; 11/7/10
Colombia en Derecho: Un poco tarde para complementar mi comentario anterior, pero bueno. Lo que sucede en mi blog es que todas mis etiquetas se ven azules, aunque copié los mismo códigos y aún cuando los cambié, siguen igual. Gracias 4ever por la recomendación, es muy útil. :D; 15/7/10
Anónimo: Juan Taloneta ¿Sucede eso mismo si sigues los pasos de "Nota" al final de la entrada?; 15/7/10
Colombia en Derecho: Si no hago lo que está en la nota final, no solo no funciona nada, sino que aparece parte del código introducido al principio del blog. He intentado algunas soluciones, improvisadas claro está, pero sigue igual. Los tamaños de la fuente si los puede cambiar. :o; 18/7/10
scarlett_news: Hola Rosa!
Hago los cambios y no se muestran, pero no entiendo qué quieres decir con "En ese caso lo que hacemos, es incluir el CSS a añadir entre..."

gracias!; 18/7/10
scarlett_news: pd: y tengo el mismo problema que juan taloneta con el código; 18/7/10
Cesar Jiménez F.: Hola rosa
Necesito de tu ayuda, por q las pestañas de mi blog no funcionan en firefox ni en crome a que se debe, podrias ayudarme por fas, e intentado borrando los cache como indicas y nada, gracias y un abrazo leyla
http://eventoscamcord.blogspot.com; 20/7/10
Anónimo: Juan Taloneta Es IMPOSIBLE que se muestre ningún código en la vista del blog si tal como indico lo colocas antes de ]]></b:skin> ... fíjate que hay dos b:skin en la plantilla y el que aquí nos interesa es el que lleva la barra de cierre antes... creo que no estás colocando el código en el lugar correcto.; 20/7/10
Anónimo: she_is_scarlett Lee el comentar anterior a este.; 20/7/10
Francisco: HOOOOOOO Esto si que sirve gracias

http://adictostecnologia.blogspot.com/; 22/7/10
Quién te lo dijo...: Hola Rosa, ya hace tiempo que no te escribo nada.Ante seguir felicitándote porque tu Blog no deja de asombrar lo que ayuda a la gente.

Ahora, quisiera hacerte una consulta (no sabía donde ubicarla), em mi blog en la parte derecha por el medio de la página me queda todo un espacio en blanco que me gustaría ocuparlo con información, u otras cosas ¿te molestaría echarle un vistazo y decirme como podría hacer?. Muchas gracias!!!; 23/7/10
Colombia en Derecho: Sobre mi problema, nada. Sigue igual a pesar de los intentos hechos. Lo cambié de puesto y pasa lo que te digo, pero la prueba de que está en su lugar es que puedo cambiar el tamaño de las fuentes con éxito. Bueno, ya encontraré la solución. Muchas muchas gracias. ;); 23/7/10
Anónimo: Quien te lo dijo...Como no habilites tu perfil o dejes la url del blog, no podré mirar nada. Me es imposible recordar todas las direcciones...; 24/7/10
Anónimo: Juan TalonetaProbemos entonces "forzando" el cambio a ver que pasa...
Coloca el !important tal como ves en esta parte del código que añadiste:

.label-size-1 a {color:#FF0000; font-size: 9px;!important;}
.label-size-2 a {color:#000000; font-size: 11px;!important;}
.label-size-3 a {color:#4682b4; font-size: 13px;!important;}
.label-size-4 a {color:#dccdc; font-size: 15px;!important;}
.label-size-5 a {color:#6495ed; font-size: 17px;!important;}; 24/7/10
Colombia en Derecho: Gracias por tu ayuda, pero no funcionó. No entiendo qué puede fallar. Si pongo una fuente de 60px, la cambia, pero con el color nada. Jejeje. Gracias también por lo de la navbar, ya lo implementé. :D; 24/7/10
Anónimo: Juan TalonetaNo se si incluiste antes el código para bajar la Navbar que colocar el !important... te digo esto porque has incluido el código de la navbar entre  y  y en la parte del CSS no puedes usar esas acotaciones, tendrías que acotarlo así:/* Navbar abajo */; 25/7/10
Colombia en Derecho: Gracias por tomarte el trabajo de revisar el código de mi blog. Ya corregí las acotaciones y revisé que no hubiera hecho otras en la parte del CSS, pero sigue igual. :); 25/7/10
Anónimo: Juan Taloneta Pues lo siento Juan.. no veo más nada, y seguro es alguna instrucción previa en la plantilla, pero no la localizo...:O; 29/7/10
Yesica: Hola Rosa :((, que tal? estoy intentando aplicar esto en mi blog, pero lo único que logro es que se vean las etiquetas centradas y en negrita, no se me ponen con color, puse el código en todas las partes que explicaste y también intente poner lo de importante y nada, ojala puedas ayudarme a ver donde esta el problema. Gracias.; 30/7/10
Anónimo: Yesica No veo el CSS aplicado en tu plantilla para poder indicarte si hay algún error... de todos modos, y ni idea de porque pasa, algunas plantillas no toman los cambios, normalmente son plantillas no originales de Blogger como en tu caso...; 30/7/10
Colombia en Derecho: Muchas gracias por todo, eres muy amable. ;); 1/8/10
Lisandro g: Como siempre Rosa, exelente aporte, permiteme preguntarte, tengo un winget en el que puse mis correos, cuando entro al blog desde mi movil, me aparecen los correos centralizados y se ven muy bien, quisiera saber si pudiera centralizar estos textos con un codigo o algo asi.
aqui mi blog
http://medicalinteractiva.blogspot.com/
en la izquierda la que dice contactos.; 13/8/10
Lisandro g: Gracias de antemano.....
:) :); 13/8/10
Anónimo: Dr.Gerald Tendrías que incluir el contenido del gadget en un div:

<div style="text-align: center;>
Aquí el contenido
</div>; 13/8/10
Lisandro g: Gracias......arigato.....thankyou....mercybeaucoup...; 14/8/10
Miguel Pérez: Muy buen aporte Rosa!! justo lo qe buscaba! muchas gracias!!, saludos desde Venezuela!! ;); 18/10/10
Mi Nana Favorita: Hola Rosa, me encanta tu blog y sigo todas tus enseñanzas. Tengo dos preguntas: Necesito ayuda con respecto a las etiquetas, hace rato busco solución y no la encuentro. Quisiera poner las etiquetas en el orden que yo escoja, y no por orden alfabético como sale en blogger. Ese es el primero tema, el segundo me gustaría que pueda tener las etiquetas en un desplegable a otras etiquetas y no a entradas. Como veras en mi blog tengo nombre de provincias y luego zonas de esas provincias. Yo quisiera que salga solo el nombre de salta, por ejemplo y luego en un desplegable, zona norte, zona sur, etc. Espero ansiosa tu respuestas. besos y muchas gracias!!!; 18/12/10
Anónimo: Mi Nana Favorita Y yo también lo quisiera corazón, pero aquí es Blogger quien "manda" y ninguna de esas cosas que pides puede hacerse de forma automática...; 19/12/10
Mi Nana Favorita: Hola Rosa, significa que tengo que hacerlo manualmente:( , con link puestos por mí?; 20/12/10
Anónimo: Mi Nana Favorita Así es. En Blogger no puede alterarse el orden de las etiquetas, solo pueden mostrarse por orden alfabético y por frecuencia (la etiqueta más usada la primera y sucesivamente) y en cuanto a lo otro, lo mismo, no hay sub-etiquetas en Blogger.; 21/12/10
rioMoros: Gracias Rosa por todo lo que nos enseñas.
Mi blog gracias a ti tiene mejor aspecto y funcionalidad.
Te dejo la direción por si te apetece echar un vistazo (se admiten sugerencias)
http://riomoros.blogspot.com/
Saludos; 7/1/11

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.