domingo, 29 de abril de 2007

Nube de etiquetas

La nube de etiquetas, tag cloud o label cloud - como quieras llamarle- sirve para tener una lista de categorías o etiquetas de manera más vistosa en tu blog. Las agrupa y dimensiona, dependiendo del número de post que cada una contenga.


¡Empezamos!

Entra a tu cuenta de blogger como siempre y ve hasta la parte de "Elementos de página" en la sección de la plantilla. Añade un nuevo elemento y elige "etiquetas".

Luego, ve hacia "Edición de HTML" y, SIN expandir la plantilla de artilugios, busca lo siguiente:



ANTES de eso pega el sigte. código:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Luego, entre "b:skin" y el final de "HEAD" debes pegar lo siguiente:





Finalmente, debes bajar hasta la parte de la sidebar (casi al final de la plantilla) y buscar:



y reemplazarlo por:



Con esto ya tendrás lista tu nube de etiquetas y serás muy feliz.

Si deseas ajustar algunas variables ve a:

var maxFontSize = 20; ---Tamaño de la fuente máxima
var maxColor = [0,0,255]; ---Color de la fuente máxima
var minFontSize = 10; ---Tamaño de la fuente mínima
var minColor = [0,0,0]; ---Color de la fuente mínima
El tamaño de la fuente puedes cambiarla como en cualquier texto. El color de la fuente está basado en el sistema RGB, si quieres cambiarlo ve -->AQUÍ<-- y elige tu color favorito.

var lcShowCount = false;
Si quieres ver el número de post en cada etiquetas cambia el valor "false" por "true".
Vía: phydeaux3

___________

12 comentarios:

june dijo...

Amaru:

No indicaste lo más importante del post.
El lugar donde ingresas tu blog.
Http//:YOURBLOG.blogspot.com, sin eso no resulta,todo lo demás me sirvió mucho.
Gracias.

Amaru dijo...

Gracias por la corrección.
Entonces:
En aquella parte donde dice "http://YOURBLOG.blogspot.com", en 'YOURBLOG' debe ir el nombre de tú blog, por lo tanto, debes reemplazarlo por el tuyo.

Guille dijo...

Amaru: Esto es exactamente lo que estoy buscando hace dias, lo encontré, me alegré enormemente, pero no me sale!!!!!!! No sé si el comentario de June tiene que ver porque no encuentro la referencia a YOURBLOG en los códigos, pero como no entiendo nada de nada no sé... se te ocurre qué puede estar fallando?

Amaru dijo...

Vaya Guille, pueden ser tantas cosas...
Lo que se me ocurre es que no hayas puesto etiquetas a tus blogs o no hayas copiado bien los códigos. Al final del post hay un link con la explicación original -en inglés, claro-.
Se me ocurre también que algunos elementos estén demás (como algunos "br") por la forma de postearse en blogger. En esa página no están afectados para nada, de ahí puedes copiarlos directamente.
Lo otro ya sería que nos contactáramos para poder ayudarte más personalmente. No tengo problemas, excepto disponibilidad por algunas pruebas.

Saludos :)

Guille dijo...

ME SALIÓ!!!!!!!!!!Sos lo mas, mil gracias por la buena onda. Era cuestión de insistir, sucede que la tecnología no es para mi, pero no sé todavía por qué insisto con ella. Mil gracias again, y gud lac con las pruebas!!!!!!

Amaru dijo...

Que bueno que haya resultado, yo no soy un experto en esto tampoco, por eso voy viendo de a poquito.

Charlie dijo...

Muchísimas gracias por esta ayuda. Me ha salido pero en lugar de una "nube", me aparecen las entradas listadas, ¿sabes porqué puede ser?
Gracias de nuevo y un saludo

Amaru dijo...

Supongo que no has insertado bien los códigos, sobretodo la última parte.

____
Revisé tu blog Charlie y, al parecer, es por el estilo de sidebar. Quizás la letra sea muy grande para que salgan dos etiquetas en una misma fila o esté alineado de esa forma. Busca en el código alguna parte donde diga alignment y verifica si dice 'on' u 'off'. Eso se me ocurre por ahora :)

Amaru dijo...

Acabo de revisar la fuente de donde saqué y sale alguna info que te ayudará si o si.
Ingresa a http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html y revisa la parte del final, donde explica el "alignment".
Saluditos ^^

Charlie dijo...

Muchas gracias por la ayuda, pero creo que lo voy a dejar por imposible y mira que lo he intentado todo. Ya conocía la página original y he seguido todos los pasos pero sigue igual.
Una vez más gracias y un saludo

Amaru dijo...

Siento mucho que no te haya resultado, a veces no todo sale muy bien en blogger. Ojalá y te resulte. Hay un par de páginas donde te "hacen" el código, búscalo y quizás te funcione así.

LunartCorp dijo...

He creado un nuevo blog para la Optimizacion de Paginas Web y Posicionamiento en Buscadores. La informacion es gratis para que puedas hacerlo por tu propia cuenta.

Hand Painted Clothing and Knitted Photo Throw
Banco de Imagenes y Fotos de Colombia
Croquis Hand Painted Clothing
Scrapbooking Classes, Albums, Products and Supplies
Millionaire Mind Secrets Seminar