Para que la nube de etiquetas parezca más una nube | Oloblogger El otro día anunciábamos que ya se podía colocar una nube de tags, etiquetas o categorías , directamente desde los gadgets de Blogger. El ca...

13 de septiembre de 2009

Para que la nube de etiquetas parezca más una nube

El otro día anunciábamos que ya se podía colocar una nube de tags, etiquetas o categorías, directamente desde los gadgets de Blogger.

El caso es que después de probarla para uno de mis blogs, el resultado me pareció bastante soso. Vamos, que para eso mejor que se hubieran estado quietos. Sin embargo, (casi) todo es aprovechable y en esta ocasión, con un poco de CSS podemos hacer una chapucilla para que la cosa tenga algo más de salero.

En un principio, se instalan las etiquetas en modo "nube" y todo lo demás lo haremos editando la plantilla y dando formato a las clases de estilo internas que Blogger utiliza para este artilugio y que según nos explicó en su momento Vagabundia, son:
  • El bloque contenedor: .cloud-label-widget-content
  • Etiqueta SPAN para los enlaces: .cloud-label-widget-content span
  • Los cinco tamaños de los enlaces: .label-size-1, .label-size-2, .label-size-3, .label-size-4 a y .label-size-5.
Como viene muy lineal, para hacer la nube un poco más caótica, vamos a hacer flotar todas las etiquetas a la derecha para que se vayan solapando en horizontal, asignaremos un alto de línea menor que las etiquetas más grandes para que se monten un poco en vertical y por último colocaremos distintos márgenes para los distintos tamaños para descentrarlas un poco más. De esta manera, un código de ejemplo podría ser este que reproducimos a continuación. Hay que colocar justo antes del ]]></b:skin>

/* ESTILO NUBE */
.cloud-label-widget-content {
width:100%;
margin:0px auto;
}
.cloud-label-widget-content span {
float:right;
}
.cloud-label-widget-content span a {
line-height:12px;
}
.cloud-label-widget-content span a:hover {
background:#ff0000;
text-decoration:none;
}
.label-size-1 a, .label-size-1 a:link, .label-size-1 a:visited {
font-size:10px;
margin:25px 0px 0px 5px;
color:#ffffff;
}
.label-size-2 a, .label-size-2 a:link, .label-size-2 a:visited {
font-size:14px;
margin:5px 10px 0px 20px;
color:#990000;
}
.label-size-3 a, .label-size-3 a:link, .label-size-3 a:visited {
font-size:18px;
margin:10px 30px 0px 30px;
color:#ffffff;
}
.label-size-4 a, .label-size-4 a:link, .label-size-4 a:visited {
font-size:22px;
margin:0px 20px 0px 10px;
color:#999999;
}
.label-size-5 a, .label-size-5 a:link, .label-size-5 a:visited {
font-size:26px;
margin:0px 0px 0px 5px;
color:#990000;
}


El resultado sería algo así:


Podeis observar que también se han usado distintos colores para las distintas etiquetas y que se han incluido las pseudo clases LINK y VISITED. Esto último es para dos cosas. Una para que no cambie el color del enlace de las etiquetas y la otra para que el puñetero Explorer no le de prioridad al estilo por defecto que tengamos para los enlaces. Por otro lado, el WIDTH se ha colocado intencionadamente para el caso de que se instale en columnas muy anchas o en blogs con pocas etiquetas, (widebar). En ese caso, convendría reducir el porcentaje a una cifra menor para que el artilugio no quedara muy desangelado.

Ahora a jugar con los tamaños, los colores, los fondos para el HOVER o cualquier otro efecto que se os ocurra. El aspecto final también cambia dependiendo de si escogemos que las etiquetas se muestren por FRECUENCIA o por orden ALFABETICO. Los tamaños de letra muy grandes o los LINE-HEIGHT más pequeños, provocan que las letras se monten bastante más, incluso solapándose. Haced pruebas.

¿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

33 comentarios :

  1. Bueno, pues nada. Es cuestión de gustos. Si a tí te gusta la versión original, déjala tal cual.

    ResponderEliminar
  2. hola Oloexperto

    una consulta, sabes que tengo un problema, en Firefox no se ve el contenido de los gadgets como seguidores, post recientes etc.... solo se ve el titulo, y el espacio del contenido, pero no se ve ni una sola letra jajaja...haz tenido una experiencia de este tipo...sabras la solucion...no tengo idea de por ke pasa en IE se ve toooodo....paree brujeria jajaja.....
    Gracias por tu ayuda....!!!

    ResponderEliminar
  3. Estimado amigo, acudo a Ud. para solicitar su ayuda en lo siguiente:
    " Necesito colocar alguna identificación de mi
    blog en él, que se pueda arrastrar y pegar en
    la barra de herramientas. Dicha identificación
    puede ser una frase o un ícono "

    Hice la solicitud por el formulario ya que no pude ver cual es su correo. Mi correo a continuación: Mi correo


    Agradeciendo su atención y una pronta respuesta.

    Cordialmente

    Jose Pinto O.

    ResponderEliminar
  4. hola Oloexpert

    Gracias ..ya solucione el problema....el responsable: el "script scriptaculaus" lo borre e inmediatamente aparecio el contenido de los gadgets, no se si tenga que ver que tengo otros scripts en mi plantilla,y repercute el orden de los mismos en el correcto funcionamiento de la plantilla, como sea scriptaculaus no era necesario y le dije : bye mucho gusto en conocerte, igual que a un novio indeseable jajaja!.... gracias!!

    ResponderEliminar
  5. jejeje, hombre con algún color y tamaño nuevo mucho mejor, :P

    ResponderEliminar
  6. Hola Oloman,

    Ahora cuando lea oiré tu voz, jiji, solo me falta ver tu foto ( es broma ). Me he fijado que en tu blog tienes un 'background' general, algo por el estilo de page back o algo así, por lo que me imagino que superpone el background con el page back por cuestiones de diseño. Cómo se puede hacer??

    Muchas Grácias

    ResponderEliminar
  7. Anónimo, eso mismo te iba a comentar. Es muy extraño, pero a mí me pasa eso aunque sólo con el gadget de Seguidores. El caso es que se trata de algo relacionado con mi equipo, porque en otros si veo el gadget. Probé a quitar scriptaculous y apareció el artilugio. No sé, seguramente Blogger haya hecho algunos nuevos cambios en el artilugio o incluso en sus APIS. ¿una nueva versión del script? Tengo que verlo

    ResponderEliminar
  8. José Pinto, quieres un "algo" que pueda ser pinchado y arrastrado... ¿dónde? ¿a la barra de navegación, la de las direcciones? Si es eso, no tengo ni idea de cómo hacerlo. Además tendría que ser una dirección, no cualquier cosa ¿es así?

    Capitán Z, este blog tiene un fondo general que se repite como suele ser habitual por todo el BODY y que construye la parte ocre con puntitos de colores. Además, tiene otra capa (#fondo) con otra imagen que ocupa un gran espacio en la parte superior y que se carga en segundo lugar por lo que se superpone a la anterior.

    ResponderEliminar
  9. Hola Oloman, soy seguidor tuyo desde hace algun tiempo y solo quiero agradecerte tus aportes que me sirven de mucho.
    Me gustaria votarte para los premios 20blogs 2009, pero no entiendo por que hay que registrarse en 20minutos.es.
    Un saludo

    ResponderEliminar
  10. Gracias a tí por el comentario Gildo. Lo de 20blogs no es posible aunque te registres. Sólo pueden votar aquellos que también han registrado su blog en la Blogotea o se han presentado al concurso.

    ResponderEliminar
  11. olaoloblogger (lindo blog :) ............
    el mio está re fome, y como no entiendo nada aparte de escribir y sacarme fotos, queria preguntarte a ti como agrandar mi gadget de seguidores (quiero que se vean todos, no solo 20), y también como poner una columna de gadgets al lado izquierdo, para dar más simetria a mis textos.(me da verguenza preguntarle a gem@; es que para ustedes esas cosas son re basicas, y yo no entiendo ná! .. xau!

    ResponderEliminar
  12. ¡Vaya, Juan Santiago! ¿Te da corte preguntarle a Gem@ y no a mí? ¡Pero si somos paisanos! :)

    En fin... para agrandar el gadget de seguidores, simplemente tienes que colocarlo en un espacio más grande. Automáticamente ocupará todo el ancho disponible. Por el diseño de tu blog, los únicos sitios posibles para esto son encima de las entradas, debajo o en footer. Vas a Elementos de Página y arrastras el gadget al lugar que desees. Luego prueba a ver el blog y comprobarás lo que te digo.

    Y con respecto al diseño, ya he visto que lo tienes solucionado. Sólo te falta centrarlo todo... si quieres. Para eso, cambia el LEFT que tienes actualmente en la línea en la que he escrito en mayúsculas, por CENTER.

    Saludos

    #outer-wrapper {
    width: 800px;
    margin:50 auto;
    padding:30px;
    TEXT-ALIGN:CENTER;
    font: normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
    }

    ResponderEliminar
  13. Hola, mira... esta muy bueno tu blog pero yo tambien quiero aportar algo de mis conocimientos, por ejemplo hay una nube de tags (etiquetas) un poco mas llamativa, por que es dinamica y se esta moviendo todo el tiempo es como una esfera de tags, mira mi blog y veras comose ve de chula la esfera de tags. http://bolivianosenvalencia.blogspot.com
    Gracias por permitirme poner mi granito de arena.

    ResponderEliminar
  14. Gracias Bululbeyeyo. Ese artilugio se llama Cumulus en su versión original para Wordpress y la versión para Blogger es llamada Blogumus.

    ResponderEliminar
  15. Hola Oloman. Estamos ya en diciembre y escribiste todo esto en septiembre. es lo que pasa por llegar demasiado tarde a tu blog :P. lamento sacar a flote el tema pero... la cosa es que lo que deberia ser una nube de tags tipica de blogger se ha convertido en una sencilla lista vertical ordenada alfabeticamente y eso que segun como lo he especificado dentro de las opciones deberia salirme como a todo el mundo!. puede ser cuestion quiza del template que uso o no... pero puede que haya algun pequeño duende travieso que esta trastocandolo todo ahi dentro.
    soy todo oidos, que digo... ojos!
    http://blueknightguild.blogspot.com

    ResponderEliminar
  16. No veo la clase CLOUD-LABEL en tu código, por lo que pienso que quizás no marcaste la opción NUBE en la configuración del gadget ¿puedes comprobarlo?

    ResponderEliminar
  17. Vaya... eso es rapidez :). esa opcion esta marcadisima asi como tambien otras que tampoco aparecen como por ejemplo las "Reacciones" al final de cada entrada, el lapiz de edicion rapida, etc. cabe la posibilidad de que el template haya modificado todo a su antojo?

    ResponderEliminar
  18. Alguna cosa si puede ser que haya desaparecido, como por ejemplo lo de las reacciones, pero lo de las etiquetas no creo que pueda ser alterado desde el contenido de la plantilla. Prueba la solución universal: elimina el gadget y vuelve a agregarlo después. Si como piensas, la plantilla lo hubiera alterado, con eso debería restaurarse.

    ResponderEliminar
  19. A problemas tontos, soluciones rapidas. muy agradecido Oloman!. solo faltaria hacer aparecer las reacciones o como minimo, la nueva evaluacion por estrellas disponible en Blog in draft pero aun estoy muy verde en todo esto asi que ire poco a poco.
    Eres de una ayuda inestimable! :)

    ResponderEliminar
  20. Las plantillas modificadas presentan problemas con lo de las reacciones y otros artilugios que se han ido incorporando a las plantillas "a distancia". En este caso, habría que restaurar todo el código del cacharrito en la plantilla. Pero para ello, primero hay que saber cual es y precisamente por tener modificaciones, no tenemos el código original.
    Solución: Abres un blog de pruebas, localizas la parte que controla eso y copias en tu plantilla actual.

    ResponderEliminar
  21. Hola oloman, hace tiempo instale esta nube de etiquetas y es una pasada, pero me ha surgido un problema con IE8 (raro) y del cual no me habia percatado antes porque uso el Firefox y en el va de maravilla. Bueno me explico, la cuestion es que uno de los titulos de la etiqueta en el IE8 sale de arriba hacia abajo cosa que me descuadra toda la nube ¿solución?

    ResponderEliminar
  22. ¿Y no te parece muy original eso de que esté en vertical? Seguro que si lo intentamos hacer adrede, no nos sale.

    Bromas aparte, me pasó a mí lo mismo hace tiempo en otro blog, pero no recuerdo cómo lo solucioné. No obstante, le acabo de echar un vistazo y tanto en FF como en IE(8), se ven bien. Vagamente me parece recordar que pasaba por usar cierta combinación de tamaños de fuente.

    ResponderEliminar
  23. Vale gracias oloman. la verdad es que es original jeje pero malo de leer, quizas cuando aumente la etiqueta se arregle, si es asi te aviso.

    ResponderEliminar
  24. Hola!
    Yo aún tengo mi plantilla clásica, pero quisiera colocarle una cajita para las etiquetas,pero no se cómo hacer.
    ¿Podrías ayudarme por favor?
    Gracias.
    Mi blog http://curioseandito.blogspot.com

    ResponderEliminar
  25. Hace siglos que no veo una plantilla clásica, pero supongo que podrás acceder a Diseño > Elementos de página. Si es así, desde ahí puedes añadir un nuevo gadget como el de Archivo del Blog que veo que sí tienes, pero que para las etiquetas se llama de esa misma manera: Lista de Etiquetas

    ResponderEliminar
  26. No tiene opción,por eso preguntaba. Gracias.

    ResponderEliminar
  27. Pues entonces lo siento, porque no sé siquiera si es posible. Supongo que no quieres cambiar al nuevo Blogger... ;)

    ResponderEliminar
  28. He pasado de blogumus y le estoy dando vueltas al css. thx y feliz semana!

    ResponderEliminar
  29. Hola Oloman sigo teniendo esta nube de etiquetas ya que me gusta bastante, pero ahora con el nuevo diseñador de plantillas al cambiar no queda igual, se queda normal y el codigo es el mismo ¿donde esta el problema?

    ResponderEliminar
  30. Locomosxca, se ve que al cambiar de plantilla se borró el código que cambia el estilo de la nube "normal". Tendrás que reponer el código que aquí se indica, porque actualmente no lo tienes.
    Saludos.

    ResponderEliminar
  31. lo siento me explique mal, hice una prueba y tuve que volver al antiguo tema que tenía, no quise arriesgarme y por eso antes de hacer nada lo grabe. En el blog sigo teniendo esta nube, pero mirare lo del codigo por si acaso.
    Hare una prueba con otro blog que tengo.
    Ya te digo cosas.

    ResponderEliminar