Un par de estilos para la nube de etiquetas | Oloblogger El gadget de etiquetas o categorías de Blogger es por razones evidentes uno de los más utilizados por todos los que andamos por esta plataf...

27 de septiembre de 2012

Un par de estilos para la nube de etiquetas

El gadget de etiquetas o categorías de Blogger es por razones evidentes uno de los más utilizados por todos los que andamos por esta plataforma.

Además de permitirnos organizar nuestras entradas, sirve a los nuevos visitantes cómo pequeña memoria de los contenidos que se encontrarán en el sitio y también cómo filtro de selección de estos. Incluso son útiles para suscribirse por feed sólo a aquellos apartados que nos interesan de la bitácora.

Su configuración en cuanto a aspecto tiene sólo dos opciones, lista y nube, pero ambos pueden ser personalizados para integrarlos con la estética de nuestro sitio. Para mi gusto el segundo es bastante más atractivo y lo que veremos a continuación son sólo un par de ejemplos distintos para modificarlo.


El primero sigue un estilo clásico y sencillo, tanto como el código necesario para cambiarlo, porque simplemente eliminaremos el justificado que lleva por defecto y centraremos las etiquetas, todo con la idea de que el conjunto parezca más una nube. Además le daremos un poco de colorido.

El gadget genera distintas etiquetas con el formato .label-sizeX, siendo X un número del 1 al 5, de manera que las etiquetas que más se utilizan llevan un 5 y las que menos un 1, pasando por 2, 3 y 4 para los valores intermedios.

Aprovechando esto podemos realzar con colores y tamaños de fuente distintos cada una de las etiquetas según su densidad.



/* Etiquetas en nube centrada multicolor */
.cloud-label-widget-content {text-align: center;}
.label-size-1 a {color: #eee; font-size: 12px;}
.label-size-2 a {color: #996666; font-size: 14px;}
.label-size-3 a {color: #333; font-size: 18px;}
.label-size-4 a {color: #eee; font-size: 24px;}
.label-size-5 a {color: #990000; font-size: 30px;}

Como no podía ser de otra manera, estos valores los podéis cambiar al gusto, pero también se pueden añadir otras pequeñas variaciones como por ejemplo un alto de línea (line-height) escaso para solapar un poco el texto de las etiquetas, una tipografía distinta (font-family) o un color de fondo para el hover.


La otra versión es más románica aunque le he añadido un pequeño redondeado y efecto para el hover que lo vuelve algo gótico. Para un estilo más sobrio mejor quitar al menos el border-radius.

Se trata en este caso de enmarcar las etiquetas en cajas rectangulares y disponerlas una al lado de la otra. El efecto para el hover es el que requiere más código porque haremos una especie de zoom con ellas. Prescindible o modificable, como siempre.



/* Etiquetas enmarcadas con efecto zoom */
.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block;
margin: 2px 2px 0 0;
padding: 4px;
text-transform: uppercase;
border: 1px solid #996666;
text-decoration:none;
font-size:12px;
color:#666;
background: #eee;
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover {
border: 1px solid #000;
color: #000;
background: #fff;
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

71 comentarios :

  1. ¡Qué bien! Me gustan esas etiquetas particularmente las Etiquetas enmarcadas con efecto zoom. las aplicaré cuando tenga oportunidad en algun blog. Sabes que aplique las instrucciones del post "Transformando el gadget de posts populares" y me quedó bien. En ese gadget veo que los titulos "caen" verticalmente sobre las imagenes, pero en el gadget de entradas populares que tienes en este blog los titulos "caen" diagonalmente. Si es posible, ¿Me puedes decir que tengo que modificar para lograr el mismo efecto que en tu blog? Me gusta más como lo tienes aquí.

    ResponderEliminar
    Respuestas
    1. Para que los carteles "bajen", el estado normal de .popular-posts li .item-title a tiene un top:0; (omitido por no ser necesario) y el .popular-posts li:hover .item-title a -que es cuando se pasa el puntero por encima de una miniatura- un bottom:80px. Así se simula el desplazamiento vertical.

      El vertical se consigue de la misma manera pero añadiendo un left. En mi caso left:130px;

      Eliminar
  2. Disculpame si te parezco muy tonta, pero soy muy nueva en estos temas de blogs, y no entiendo bien en donde puedo poner el código para aplicar este efecto a las etiquetas, la opción de etiquetas no me deja. No sé si me puedes guiar un poco con esto, adicionalmente quisiera saber el código se debe copiar tal como lo pones en tu post o hay que cambiarle algunas cosas adicionales? Gracias y disculpame por molestarte con preguntas a lo mejor muy evidentes!

    ResponderEliminar
    Respuestas
    1. Hola. Primero tienes que añadir el gadget desde el apartado Diseño del Escritorio. Es el que se llama Etiquetas.

      Luego, para cambiar el estilo es cuando necesitas esto. Aquí lo que tienes que editar es la plantilla y pegar uno de estos códigos (el que prefieras) tal cual. El lugar adecuado es antes del cierre de la etiqueta SKIN.

      Ver esto y esto otro para más información.

      Eliminar
    2. Oloman, yo tampoco sé dónde pegar el código. Ya tengo el gadget de las etiquetas en forma de nube. Pero quería probar con el efecto de este segundo estilo redondeado qe muestras. Fui a editar, pero ahí no me permite introducir ningún código. Fui a diseño, pero no me aparece configuración de plantilla ¿?.
      Por si me explico mal, puedes entrar en mi blog y ver a qué me refiero.
      Bueno, gracias otra vez.
      Saludos!!

      Eliminar
    3. En Diseño no, tienen que entrar en Plantilla > Edición HTML. Últimamente doy por supuesto que sabéis dónde hay que meter el código de estilo (CSS), pero es dónde dije en 2.1. Te agradecería que vieras los enlaces que puse en ese comentario. Esa información es básica para trastear la plantilla.

      Eliminar
  3. Creo que ya tengo trabajo para este finde: me gusta la primera opción para mi blog, en monocolor las etiquetas siempre me dieron una sensación como de "apretujadas" y esta puede ser una buena solución al problema. A ver cómo se me da. :)

    ResponderEliminar
    Respuestas
    1. Primer problema: las etiquetas no me cambian de color. :( El caso es que sí tengo etiquetas de distinta frecuencia (sí tengo diferentes tamaños letra, etc.) pero el color no sé por qué no me lo acepta.

      Eliminar
    2. Vale, en lugar de .label-size-X a usa #sidebar-wrapper .label-size-X y verás cómo se soluciona el problema.

      Eliminar
  4. Cuando aplico el 1º código, me sale perfecto pero todas del mismo color, negro. No se aplica los otros colores del codigo. He mirado y remirado pero no doy con la tecla. A ver si me echas una mano.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Puede que todas las etiquetas tengan la misma densidad (más o menos el mismo número de posts) y en ese caso todas se muestran igual. Para probar tendrías que crear un post con una nueva etiqueta no utilizada por tí anteriormente. Así tendrías una distinta a las demás para comprobar si es eso u otra cosa. Luego borras el post ese de prueba.

      Eliminar
  5. Gracias!!! quedó muy bien...

    ResponderEliminar
  6. Ey!!! mi blog ya pinta mejor! Muchas gracias por el post, muy util

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. Buenos días:he subido el código de etiquetas zoom,son muy guapas!!! pero me ha surgido un problema se puso el fondo de mi blog en blanco y lo tengo negro.
    Serias tan amable de comentarme si se puede volver el fondo a negro?y que debo modificar en el código de las etiquetas?
    Tengo que ver tu blog con mas tiempo,es estupendo
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. ¿El fondo del blog o el de las etiquetas? El del blog se puede deber a un error en el copy-paste, pero si lo que quieres es sólo cambiar el color de las etiquetas, eso está dentro de size-label a, indicado como background: #eee;

      Eliminar
    2. Muchísimas gracias por tú amabilidad:Tenías razón el error era de copy-paste.Creo que quedaron bien.
      Me encanta como nos enseñas.Gracias de nuevo

      Eliminar
  9. a mis marcadores Olo, muy buen truco, quiza lo use en otro blog mas adelante.

    ResponderEliminar
  10. Utilicé las etiquetas con zoom, muy buenas! Pero, no es lo mismo en Chrome que en otros navegadores. Lo que busco, si me puedes ayudar, es incorporar un borde similar a los títulos de los gadget y cambiarles la tipografía. Para que te des una idea mi página es www.buenosairesmequiere.com y verás que, casi todo tiene bordes redondeados. Gracias!

    ResponderEliminar
    Respuestas
    1. Hola. Tú tienes este estilo en tus gadgets de la barra lateral:
      .sidebar .widget {
      border-bottom: 5px ridge #FF9733;
      padding-bottom: 20px;
      }

      Lo que tienes que hacer es buscar eso en tu plantilla y cambiar las propiedades. Por ejemplo, el borde podría ser integral con border:1px solid #00000;. Para cambiar la tipografía tendrías que utilizar font-famiy en esa misma parte.

      Para redondear hay que usar lo mismo que aquí: border-radius.

      Eliminar
  11. Que bueno! ya estoy intentando algo, lo que no sé (perdón por la ingnorancia) es dónde pongo font-Famiy.
    Otra pregunta, ya que estamos:¿Cómo puedo bajar el tamaño de "Sin Comentarios"? por ahora no me cambia la leyenda, no seé que hago mal, pero si lo logro igual me gustaría una tipografía más pequeña. Gracias otra vez

    ResponderEliminar
    Respuestas
    1. Con la estupidez no pasa lo mismo, pero la ignorancia se soluciona aprendiendo y una de las maneras de aprender es preguntar, así que no hay que pedir disculpas.

      font-family es una propiedad CSS y por tanto, esta y los valores que correspondan hay que ponerlos en esa parte. Esto en Blogger es entre las etiquetas SKIN.

      Hay que aplicársela a la clase que se quiere modificar y en este caso habría que añadirla dentro de las llaves de .cloud-label-widget-content {}.

      Eliminar
  12. Hola, Oloman. Estoy usando las etiquetas de la segunda versión, y se ve muy bien tanto en Chrome como en Firefox, sin embargo en Explorer la última etiqueta de cada línea, en lugar de bajarse a la siguiente línea por falta de espacio, aumenta su longitud y queda bastante mal. También me he dado cuenta que los bordes de las etiquetas de tu entrada aparecen redondos y con el efecto de zoom en explorer, sin embargo no ocurre en mi blog... ¿Podrías arrojar algo de luz a mis dudas?

    ResponderEliminar
    Respuestas
    1. La respuesta es que Internet Explorer interpreta las propiedades CSS a su manera... o incluso de ninguna. Podrías probar a cambiar el block por un inline-block, pero también dependerá de la versión utilizada de IE.

      Eliminar
  13. se ve bien. creo que lo utilizare :) saludos.

    ResponderEliminar
  14. Hola Oloman, he puesto el segundo código y queda genial, pero sería posible alinear las etiquetas en el centro para que no queden siempre los espacios a la derecha?
    No se sí me has entendido bien.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Perfectamente, porque cuando publiqué esto lo intenté yo mismo... pero sin éxito. Seguro que se puede, pero yo no di con la tecla adecuada para lograrlo.

      Eliminar
  15. Hola Oloman, ¿como hago para cuando hago clic en una etiqueta solo se me muestren las entradas resumidas o solo el titulo de la misma personalizado.

    ResponderEliminar
    Respuestas
    1. Hola. Utiliza el buscador con la palabra "sumarios" y verás diversos sistemas. Normalmente afectan tanto a las páginas de etiquetas como a las de navegación y la propia de Inicio, pero eso dependerá de cómo pongas la condición.

      Quizás encuentres útil que sea para todas esas y no quieras cambiar nada. En caso contrario añade un nuevo comentario en la entrada del sistema que más te guste. Te recomiendo la que no utiliza JavaScript. Es la que más me gusta.

      Eliminar
  16. soy nuevo en esto del blogger, y no entiendo qué hago con el código, dónde lo pego o qué hago. Agradezco cualquier ayuda

    ResponderEliminar
    Respuestas
    1. En este caso concreto sólo es CSS y en Blogger ese tipo de código va entre las etiquetas SKIN de la plantilla.
      Más info
      Y algo más

      Eliminar
  17. que tal compañero oloman, he pegado el codigo donde haces referencia pero no se visualizan los estilos, dime que estoy haciendo mal...?

    ResponderEliminar
    Respuestas
    1. No sé porque no veo en tu perfil ninguna página para echar un vistazo ¿Quizás no has usado el estilo de nube?

      Eliminar
  18. EN DONDE SE PEGA EL CODIGO AL MOMENTO DE EDITAR, ESPERO AYUDA =(

    ResponderEliminar
    Respuestas
    1. Esos códigos son CSS y por tanto los tienes que poner entre las etiquetas SKIN de tu plantilla. Si usas el nuevo diseñador, también es posible añadirlos en Avanzado > Añadir CSS

      Eliminar
  19. Hola Oloman, me encanta tu blog, lo acabo de descubrir y es de una gran ayuda. La verdad es que por el formato de nuestro blog, las etiquetas tenemos que reflejarlas en forma de lista. Pero están demasiado pegadas unas de otras, cómo podemos ponerle una línea que las separe o meterlas en cuadrados uno debajo de otro para que queden bien organizadas? ¿Puedes echarnos u cable?

    Muchas gracias por tu generosidad!!!

    ResponderEliminar
    Respuestas
    1. ¿Me pasas la dirección de tu blog que lo vea? Me resulta más fácil contestarte sobre algo concreto que sobre una cuestión general.

      Eliminar
  20. Hola, tengo el segundo código, seria posible que al hacer click en una etiqueta solo se mostraran dos entradas?

    ResponderEliminar
  21. Ya encontré la manera, gracias.

    ResponderEliminar
    Respuestas
    1. Supongo que fue cambiando el valor de max-results ¿no?

      Eliminar
  22. HOLA! He conseguido poner una nube de etiquetas como la segunda!
    Bueno, gracias a ti y a Luis Chávez. Primero me leí lo que pusiste en 2.1 y luego me atreví, jeje
    Cuánto se aprende con vosotros!!

    Soy Sara del blog http://decosturasyotrascosas.blogspot.com.es/

    GRACIAS!!

    ResponderEliminar
  23. GRacias!! Conseguí colocar las dos sin problemas. Al final me decanté por la primera :D

    ResponderEliminar
  24. Hola, mira, yo también estoy intentando comenzar a darle forma a mi blog.
    He leído los artículos que indicas mas arriba para entender donde colocar estos CSS, pero sabes que no encuentro la etiqueta SKIN!
    Si me ayudaras a entender donde colocar tu código y si debo borrar algo de lo existente, te lo voy a agradecer.

    Saludos y gracias por ofrecernos tus conocimientos.

    ResponderEliminar
    Respuestas
    1. Todas las plantillas Blogger tienen al menos un par de etiquetas SKIN.

      Empieza por aquí y continúa por aquí. Con eso comenzarás a entender muchas cosas. Si quieres más material, avísame ;)

      Eliminar
  25. hola! muy interesantes artículos, soy seguidor del sitio, lo explicas todo con mucha claridad, tengo una pregunta si tengo que crearme un css personalizado para darle estilo ya sea a mi nube de etiquetas, a mi menu etc, ya que al editar el template de blogger ya tiene creado sus class e id, donde alojo el archivo css para que se cargue en mi blog de blogger? o google donde recomienda?

    muchas gracias por la respuesta!

    ResponderEliminar
    Respuestas
    1. No hace falta ningún archivo CSS. En Blogger puedes escribir directamente ese tipo de código en la plantilla, entre las etiquetas SKIN.

      Eliminar
  26. hola oloman,
    coloque el código pero sólo me cambio el color y no les cambio el tamanio como en las nube que mostraste en el primer ejemplo, que debo hacer para que tengan ese aspecto???? grcs.slds.

    ResponderEliminar
  27. Puede que tengas en tu plantilla algo que sobreescriba ese estilo. Para evitarlo utiliza !important en todas las reglas. Así:
    .label-size-1 a {color: #eee; font-size: 12px !important;}

    ResponderEliminar
  28. lo agregue en el "diseñador de plantillas de blogger", centra las etiquetas y las cambia a un color rosado pero no les cambia los tamanios.
    Te paso la dirección de mi blog para que lo veas: http://alquilocasaconpiscina.blogspot.com/, grcs. slds.

    ResponderEliminar
    Respuestas
    1. Sí que funciona lo que pusiste. Lo que ocurre es que da la casualidad de que todas las etiquetas tienen la misma cantidad de entradas y todas salen con un .label-size-2 a {color: #996666; font-size: 14px;}

      Ese color rosa es el #996666. Si lo cambias verás que cambian todas. A medida que unas etiquetas tengan más posts que otras, cada una tomará un tamaño y color diferente, según lo programado en el CSS.

      Eliminar
  29. Hola una consulta, una vez "seleccionada" una etiqueta, en el gadget se la ve sin estilo. Todas las demás quedan con el estilo que habíamos armado, pero la seleccionada no. Hay algo así como un ".lavel-selected" o algo parecido donde tengamos que darles el estilo a la etiqueta seleccionada? Gracias

    ResponderEliminar
    Respuestas
    1. Sí claro. El estilo de la etiqueta seleccionada se puede modificar con este selector:
      .label-size span {
      color: red; /* lo que sea */
      }

      Eliminar
  30. Hola, a mí no me responde nada que pegue antes de Skin

    ResponderEliminar
    Respuestas
    1. En la plantilla Blogger hay dos etiquetas SKIN con unos símbolos que no recuerdo. Entre ambas te debe funcionar, sin problemas, todo el CSS que añadas.

      Eliminar
  31. me quedo muy bonito en mi blog... muchas gracias mi hermano... un Abrazo !!!!

    ResponderEliminar
  32. Tienes unos posts fantásticos y muy interesantes.(Pero)Hay un problema que estoy seguro que muchos tienen como yo,para los que no somos tan inteligentes y empezamos con los códigos al menos yo te agradecería si fueras mas explicito donde van colocados los códigos me explico si van en el head delante, atrás, o en body delante,atrás etc,para mi es el único problema que tengo. Muchas gracias.(posdata soy un yayo de 62 años que le cuesta que le entren estas cosas)

    ResponderEliminar
    Respuestas
    1. Jajaja... Yayo Francisco, eso que pides lo hago a veces sí, a veces no, pero es por no ser repetitivo, pues en principio todos mis posts necesitarían de esas referencias.

      Sin embargo, si pasas por este artículo, probablemente ya no necesites que yo de ninguna referencia.

      Eliminar
  33. oloman tengo una consulta por favor:
    ¿como puedo cambiar el diseño solamente "de una etiqueta" que aparece encima de cada post en mi blogger?

    justo es la etiqueta: vigente que quiero ponerlo en un cuadro verde grande, gracias por la ayuda oloman
    http://pruebaprube123a.blogspot.pe/2017/02/dasdasda.html

    ResponderEliminar
    Respuestas
    1. Hola. Aunque no entendí muy bien, prueba a añadir esto a tu CSS a ver si acertamos:
      .breadcrumbs a:last-child {
      background: green;
      color: white;
      line-height: 18px;
      padding: 6px 0;
      box-sizing: border-box;
      }

      Eliminar
    2. Gracias oloman si funciono, eres un capo maestro !

      Eliminar
  34. Buenas Oloman,

    Llevo un par de semanas leyendo y tratando de aprender de todo un poco y estoy demasiado verde, pero partiendo de la base y modificando por aquí y por allá estoy empezando algo. Me gustaría saber cómo puedo hacer - o donde buscar - un menú vertical con efecto deslizante como el que tiene Paco y Verónica travels en la sidebar izquierda (Donde pone Mundo Friki y tal).

    Te dejo el enlace a su blog para que veas lo que te comento.
    http://www.pacoyverotravels.com

    ¡Un saludo y gracias por todos los aportes!

    ResponderEliminar
    Respuestas
    1. Hola Alex. Perdona que lo diga pero se nota la "verdura" precisamente por la cuestión que planteas :)

      Ese tipo de menú es de los más sencillos, tanto que ni siquiera lo tengo explicado en el blog. Se trata de hacer un lista y en cada elemento poner un enlace, sólo eso. De manera natural ya quedan uno encima de otro.

      De todas formas, por no dejarte sin nada, date una vuelta por esta entrada

      Eliminar
    2. Buenas Oloman. Efectivamente cuando vi el código me di cuenta de que no era tan complicado jaja. De hecho utilicé uno que tienes en la portada y de lujo.

      Gracias!

      Eliminar
  35. Hola Oloman, en este blog → http://bodegaveintidos.blogspot.com.ar/ deseo -de hecho lo hice-que la nube de etiquetas se vea como la opción 2 del posteo. No logro hacer que funcione. Sugerencias? Gracias

    ResponderEliminar
    Respuestas
    1. Sólo una: Añadir el CSS que explico. Con eso, en el sitio correcto, 100% seguro que se ve igual que en el ejemplo.

      Ahora mismo lo que añadiste no es EXACTAMENTE ni el código 1 ni el 2, sino más bien una mezcla que como comprobaste no da ningún resultado.

      Eliminar
  36. Creí haber colocado el correcto (puse label1 o label2 porque asi estaba identificado el widget) de tu posteo. Rehice colocando antes del cierre de SKIN en directo a la plantilla o por el diseñador. Nada. Igualmente, gracias, perdón las molestias

    ResponderEliminar
    Respuestas
    1. Repito que sólo hace falta añadir lo que publiqué en este post, pero es que no veo eso en ninguna parte.

      No hace falta poner label1, ni label2, ni nada adicional; sólo el código al final de este post.

      Eliminar
    2. Iba a enviarte a tu mail una captura de pantalla del código de fuente.., hasta que borré y lo volví a colocar y funcionó Oloman. Hice unos retoques en los redondeos. Joya, como decimos en Argentina. Saludos y gracias

      Eliminar
    3. El código fuente precisamente es de las cosas que puedo ver desde aquí y por eso sabía que el CSS no estaba puesto (o bien puesto). Si ya se solucionó todo... ¡perfecto!. Un saludo

      Eliminar