56

Cambiar el diseño de la nube de etiquetas

Gadget 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

4ever

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.)

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!!!

*Eva*

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!

Rosa

Bilosony2™ Pues no he notado nada...:0 Quizá andan en pruebas de nuevo... de ahí tanto fallo últimamente...

Rosa

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

4ever

Gracias Rosa, lo tendre en cuenta ;)

Carlos Soler

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!

Gerardo

Hola rosa como pongo ese enlace de "Estas en Inicio > Etiquetas > Nombre del Post"

Espero lo añadas esta muy bueno =)

Saludos

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 =)

Juan Taloneta

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

4ever

y el color tambien se puede

http://paletteman.com/

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.

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!!!!

Rosa

Gerardo Aquí lo tienes:
http://elescaparatederosa.blogspot.com/2007/05/breadcrums-siguiendo-el-rastro-del.html

Rosa

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.

Rosa

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...

Aurora

Una duda, ¿cómo hacer para que aparezcan las etiquetas con colores?
A mí me salen todas grises oscuros.

Pilar

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,

Rosa

Pilar En breve subiré a entrada al tema... mientras si te corre prisa, creo que en Vagabundia hay algo al respecto...

Rosa

Aurora Es lo que explico en la entrada,cambiar tamaño y color...

Ceci.-

Gracias Rosa, voy a probar subiendo de nuevo la plantilla, espero que se me solucione!

Joneyber

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.

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.

Rosa

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...

Marcelo

gracias Rosa tu blog me ha servido de muchísima ayuda he inspiración y nunca te he agradecido por eso saludos...

Juan Taloneta

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

Rosa

Juan Taloneta ¿Sucede eso mismo si sigues los pasos de "Nota" al final de la entrada?

Juan Taloneta

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

she_is_scarlett

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!

she_is_scarlett

pd: y tengo el mismo problema que juan taloneta con el código

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

Rosa

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.

Rosa

she_is_scarlett Lee el comentar anterior a este.

Javier

HOOOOOOO Esto si que sirve gracias

http://adictostecnologia.blogspot.com/

Quien 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!!!

Juan Taloneta

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. ;)

Rosa

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...

Rosa

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;}

Juan Taloneta

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

Rosa

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 <!-- Navbar abajo --> y <!-- Navbar abajo --> y en la parte del CSS no puedes usar esas acotaciones, tendrías que acotarlo así:/* Navbar abajo */

Juan Taloneta

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. :)

Rosa

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

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.

Rosa

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...

Juan Taloneta

Muchas gracias por todo, eres muy amable. ;)

Dr.Gerald

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.

Dr.Gerald

Gracias de antemano.....
:) :)

Rosa

Dr.Gerald Tendrías que incluir el contenido del gadget en un div:

<div style="text-align: center;>
Aquí el contenido
</div>

Dr.Gerald

Gracias......arigato.....thankyou....mercybeaucoup...

Miguel Pérez

Muy buen aporte Rosa!! justo lo qe buscaba! muchas gracias!!, saludos desde Venezuela!! ;)

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!!!

Rosa

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...

Mi Nana Favorita

Hola Rosa, significa que tengo que hacerlo manualmente:( , con link puestos por mí?

Rosa

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.

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

Publicar un comentario en la entrada

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