Ya está disponible la opción de mostrar las etiquetas en forma de nube directamente desde el mismo elemento Labels de Blogger por lo tanto, quien quiera, pude eliminar el truco original y aliviar un poco su plantilla.
El código ya estaba disponible desde hace varios días pero parecía que no se había implementado. Para usarlo, basta editar el elemento y marcar la opción NUBE:
El código ya estaba disponible desde hace varios días pero parecía que no se había implementado. Para usarlo, basta editar el elemento y marcar la opción NUBE:
Eventualmente, podemos seleccionar cuáles son las etiquetas a mostrar y cuáles son las que permanecerán ocultas. Para eso, marcamos la opción Etiquetas Seleccionadas y aparecerá entonces un enlace para Editar:
Cualquier cosa, si no quieren arriesgarse, en lugar de editar el elemento existente, pueden agregar uno nuevo ya que no hay limitaciones y pueden tenerse tantos como se quiera y cada uno es independiente del otro y, en todo caso, este es el mejor método porque el código nuevo difiere del antigüo así que es lo mejor para evitarse dolores de cabeza.
El resultado final será una nube con ciertas característcas gráficas por defecto, donde se verán los títulos de estas con cinco tamaños diferentes de acuerdo a la cantidad de entradas de cada una de ellas.
Tanto el tamaño de las letras como el color serán los asociados a todos los enlaces de la sidebar pero, eso puede ser modificado si agregamos estilos. Por defecto, son estos:
El resultado final será una nube con ciertas característcas gráficas por defecto, donde se verán los títulos de estas con cinco tamaños diferentes de acuerdo a la cantidad de entradas de cada una de ellas.
Tanto el tamaño de las letras como el color serán los asociados a todos los enlaces de la sidebar pero, eso puede ser modificado si agregamos estilos. Por defecto, son estos:
.label-size-1 {font-size: 80%; opacity: 0.8;}
.label-size-2 {font-size: 90%; opacity: 0.9;}
.label-size-3 {font-size: 100%;}
.label-size-4 {font-size: 120%;}
.label-size-5 {font-size: 160%;}
.cloud-label-widget-content {text-align: justify;}Y, como estos estilos se cargan automáticamente, debemos sobrescribirlos agregando los nuestros justo después de <body>:
<style type='text/css'>
/* este es el bloque que las contiene, en lo personal, prefiero centrarlo */
.cloud-label-widget-content {
text-align:center;
}
/* cada enlace está dentro de una etiqueta SPAN */
.cloud-label-widget-content span {
display: inline-table; /* con esta propiedad puedo centrar cada enlace verticalmente */
line-height: 1.2; /* esta es la separación vertical entre líneas */
padding: 0 0 0 5px; /* esta es la separación horizontal entre enlaces */
vertical-align: middle; /* esto lo centra verticalmente */
}
/* la fuente de los textos de los enlaces */
.cloud-label-widget-content span a {font-family: Verdana; }
/* y el color del efecto hover sobre esos enlaces */
.cloud-label-widget-content span a:hover {color:#FFF !important;}
/* estas son las propiedades para cada uno de los cinco tamaños */
.label-size-1 a {color: #789; font-size: 11px;} /* el de menor tamaño */
.label-size-2 a {color: #89A; font-size: 13px;}
.label-size-3 a {color: #9AB; font-size: 14px;}
.label-size-4 a {color: #BCD; font-size: 17px;}
.label-size-5 a {color: #DEF; font-size: 20px;} /* el de mayor tamaño */
</style>
Como siempre, podemos editar el código del widget para establecer la cantidad de entradas a mostrar cuando se navegan etiquetas (por defecto es 20). Para eso, buscamos lo siguiente:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
y lo reemplazamos por esto:
<a expr:href='data:label.url + "?max-results=5"'><data:label.name/></a>Ese código está dos veces dentro del widget, uno para cada modelo (lista y nube) así que modificamos ambos, colocando el número que mejor se adapte a nuestras necesidades.
45 comentarios:
Hahaha! muy bueno, ya era tiempo de que trabajen los de blogger.
Creo que implementan algo con un periodo de 1 1/2 años de tardanza.
Recién me he dado cuenta que mi Feed de Feedburner me esta pidiendo que migre mi cuenta a Google, ahora a buscar mi contraseña, por donde la habré apuntado. :D
Saludos!
Interesante esto.. jejeje despues de que sufri tanto hace poco buscando como hacer la nube.. ahora a blogger se le ocurre ponerlo facilito =D jajaja. cooosas..
Saluudos =D
Bueno Claudio, luego de tantos cambios personales, mudar la cuenta no ebe ser demasiado complicado :D
Y sí, año y medio MÍNIMO :D Debe ser para que no nos mal acostumbremos.
Moisés: Sí, la verdad es que es muy sencillo de poner y no hay que sufrir con cosas raras. Aquí ya lo puse y parece que anda bien.
Epa, Claudio. Acabo de ver su "secreto" ... MUY PERO MUY BUENO!!!!!!!!!!!!!!!!!!!!!! Shhhhhh ... no he dicho nada :$
Lo que no entiendo es por qué tardan tanto en implementar este tipo de cosas. ¿Existe la carrera superior de ingeniero Google? Lo digo porque se debe de vivir pero que muy bien y relajado. Mire usted que todavía cambio mis estudios... :)
Jajajaja... :D, sola a 27000 asiduos lectores a este blog.
Pero Master! :D
Bueno, Claudio, aca todos mantendrán el secreto, es gente muy discreta :D
Jabba: Hay una carrera y me han dicho que es muy exigente, pero, a los que reprueban, los mandan a trabajar a Blogger :D
Hola, pregunto...si yo selecciono la opción Nube de Etiquetas en blogger, sin tocar el código como suguieres, igual tendría la nube?
Si es así ¿porqué a mí no me sale??? :D recórcholis!!!
Saludos :P
La Dueña: Lo que ocurre es que el código que está en algunas plantillas es el viejo y no el nuevo; no se actualiza solo y por eso, seguramente, te aparece la opcion pero no pasa nada. Lo mejor es agregar un elemento Etiquetas nuevo y, en todo caso, si quieres, expande la plantilla y copia el contenido de ese gadget en el otro; esto último es más engorroso, por eso te recomiendo agregar uno nuevo y luego, eliminar el viejo.
gracias ya la puse en mi web
Muchas gracias JMiur justo lo que andaba buscando :D
Funcionando en mi blog ;)
http://arenasgamerr.blogspot.com/
Diego Arenas
Bien hecho, Diego :)
Hola JMiur, acabo de aplicar la nube de etiquetas en mi nueva organización de gadgets. Saludos :)
Saludos, Manfenix. Me alegro que funcionara :)
A dónde hay que acceder para seleccionar esta opción de la "Nube de etiquetas".
Es una opción que está en el mismo elemento Labels (Etiquetas) que se agrega a Blogger.
¡¡ Grande Vagabundia !!
Como siempre, excelente entrada en un blog brillaaaanteee!
Felicitaciones y gracias.
EFI de EFINews
Hola JMiur, en primer lugar felicitarte por el blog, lo sigo desde hace mucho tiempo, aunque nunca había comentado...
En varios de mis blogs tengo un problema cuando quiero seleccionar las etiquetas que quiero mostrar en la nube de etiquetas (en realidad me ocurre lo mismo con el listado de etiquetas que blogger ofrece por defecto). El widget da la posibilidad de desmarcar las etiquetas que no queremos que se vean pero lo cierto es que no funciona en muchas de las platillas y en el propio widget se borran los cambios aunque guardemos (por ejemplo: "Etiquetas seleccionadas: 19 de 21"... guardamos, y vuelve a aparecer "Etiquetas seleccionadas: 21 de 21" ) en el blog, por supuesto, aparecen igualmente todas.
He probado a crear una nueva lista de etiquetas pero tampoco funciona... ¿Conoces alguna solución? ¿Alguna modificación del código de la plantilla para que esto funcione? Muchas Gracias de antemano.
Pués no se me ocurre nada, si el problema es así, da la impresión de ser un error del mismo Blogger; ¿has probado si es el nombre de las etiquetas el que provoca eso o has probado en otro navegador?
Hola Jmiur... hubiera jurado que te habia dejado un comentario aqui... de hecho me suscribí, pero no lo veo.
Te preguntaba que como puedo hacer para tener la nube como tu la tienes, con el atributo nofollow
gracias :)
Si una vez agregada, expandes los artilugios y buscas el código, deberías ver algo así:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
Ahi puede agregarse el atributo:
<a rel='nofollow' expr:dir='data:blog.languageDirection' expr:href='data:label.url'> ...
hola JMiur
quería consultarte lo siguiente: por algún motivo aunque no tildo la casilla de "mostrar cantidad de entradas por etiqueta" aparecen, quisiera saber si es porque tengo pocas entradas o si hay algún motivo. Me fijé que la línea que debiera sacar sería "span dir='ltr'>()</span". En realidad en todo caso no quiero borrarla sino que no aparezca la numeración de entradas, qué debiera modificar allí? Qué debiera hacer? desde ya muchas gracias!
Susana:
No creo que la cantidad de entradas influya. En todo caso, si desmarcar la opción no funciona y no quieres eliminar el código, se podría ocultar con CSS, si añades algo así:
.cloud-label-widget-content span span {display:none}
¡Hola JMiur!
Estoy iniciando un Blog donde comparto discos con otros usuarios. Me estoy valiendo de muchas de las cosas que publicas aquí y que tanto nos ayudan a todos. No tengo ni idea de HTML pero a base de mirar me las apaño poquito a poco. ¡Así que muchas gracias!
El asunto es que al aplicar este "truco" aparece un problemilla, seguramente porque soy un manazas, pero no logro enmendarlo. Después de modificar la nube, estando deslogueado de Blogger, me aparece el típico símbolo para editar el widget; te dejo una captura:
http://img94.imageshack.us/img94/4500/editarduda.png
Y bueno, no sé cómo hacer que desaparezca jajaja, ¡es de brujería! :P
¡Muchas gracias JMiur! Un saludo.
PD El Blog es este: http://discopatosis.blogspot.com
Vinilocura:
Debería ver el ejemplo porque ahora, en tu blog, las etiquetas se muestran de modo normal.
Si has cambiado el código manualmente, revísalo porque no deberías tener problemas. El código que muestra ese ícono de edición es este: <b:include name='quickedit'/> y va al final:
..............
<b:include name='quickedit'/>
</div>
</b:includable>
Muchas gracias por contestar con tantísima celeridad.
Llevo un buen rato intentando algunas cosas, pero... no doy con la tecla. Las etiquetas se mostraban normal porque las dejé en 'Lista', para que no se viera la herramienta editar cuando estaba en 'Nube'.
Ahora lo hago al revés, lo dejo en 'Nube' para que se vea jajaja. Lo he intentado de muchas formas, y nada, simpre me cargaba la plantilla y tenía que subir la copia.
Gracias otra vez JMiur :)
No veo cuál puede ser el pronblema, salvo que haya un error de Blogger. Lo que se aprecia del códigoo s correcto.
Podrçias quitarle simplemente esa etiqueta <b:include name='quickedit'/> y listo o bien ocultarla de modo más estricto, poniendo en el CSS:
.cloud-label-widget-content span item-control span.item-control {display:none !important;}
¡Fantástico! Es usted un genio.
Probé con su segundo consejo, que no funcionó porque probablemente no lo apliqué bien. Volví al primero, eliminé la línea, y voilà, hecho.
Muchísimas gracias de nuevo, me ha sido de gran ayuda :)
¡Un saludo!
Wenas. Tras varios días de intentar hacer una nube de tags para blogger tras consultar unas pocas webs. La única que me ha medio funcionado es realizar lo que tan bien explicas aquí. Mi problema sigue siendo que todas todas las etiquetas aparecen en el mismo tamaño y con el mismo color, y al sobrepasar el cursor por encima desaparece sin mostrar ningún el nombre de la etiqueta. Al principio pensé que se debería a una plantilla de blogger que le tenia puesta, pero estoy probando con la inicial de blogger y así por ejemplo ya me funciona el ejemplo de paginación que también has explicado en otra entrada, pero lo de las nubes de tags, no sé por qué ni como arreglarlo. Donde exactamente hace que cada etiqueta tenga un tamaño diferente, para qué quizá modificando ahí algo pueda salir? Sabeis de más gente que haya tenido el mismo problema? Para que veas exactamente a que me refiero mi blog es http://varlania.blogspot.com/ Muchas gracias
Lo del tamaño, parecería ser porque todas tienen la misma cantidad de entradas ¿es así? Eso no lo revisé en tu blog pero eso es lo que muestran al lado de cada nombre; que todas tienen una entrada.
Lo del color, es verdad pero el código está bien ubicado, lo que ocurre es que deberias cambiarle el color ya que ahora dice que es blanco cuando colocas el cursor encima y por lo tanto, parece que desaparece ya que tu fondo, también es blanco:
.cloud-label-widget-content span a:hover {color:#FFF !important;}
Ahí, en esas definiciones, puedes establecer todos los parámetros gráficos que quieras.
hola JMiur,mi pregunta es la siguiente,ya instalé la nueva nube de etiqueta,el problema es que al hacer click en una etiqueta,ésta se ábre en la misma pagina,que se podría hacer para que ábra en una nueva ventana? discúlpas y muchas gracias. chris...
Definitivamente sí y ya funciona a las mil maravillas. Lo primero agradecido con sinceridad, muchas muchas vueltas hasta llegar aquí.
!Conseguido!. Cambié a mayores algunos parámetros de los que me comentaste (del color sobre todo) y el resultado es óptimo. Por lo tanto consejo para los que comienzan con estas cosas: Si todas las entradas se repiten en número (por orden de frecuencia) el color y tamaño serán los mismos. Por cierto cambie algunos colores que en el post vienen en con 3 cifras solos por los tradicionales de 6 cifras (ejemplo http://en.wikipedia.org/wiki/List_of_colors) y así me va a las mil maravillas y si uno se cansa de los colores los puede volver a cambiar, igual con tamaños, etcétera. Repito muchísimas gracías!!
Así como podemos cambiar la cantidad de entradas a mostrar, lo mismo podemos hacer, agregando target en el enlace:
<a target=''_blank expr:href='data:label.url'><data:label.name/></a>
Chema García:
Me alegra que con eso se resolviera el problema :)
Bueno apenas que leo este post me parecio muy bueno
puse este truco de agregar estilo a mi blog y me quedo muy bien
puedes verlo y decirme que tal
http://curiosidadesofworld.blogspot.com/
Muy buen truco
Siguiendo tus indicaciones en comentarios anteriores añadí una línea para adaptar el color de los links visitados al resto de la página y parece que funciona:
.cloud-label-widget-content span a:visited {color:#C06 !important;}
Pero, realmente, lo que estaba intentando modificar era que el link activo (la etiqueta que estoy viendo) se muestra en blanco y desaparece en el fondo. ¿Cómo podría cambiar este color?
Con CSS, el link activo es aquel donde haces click:
.cloud-label-widget-content span a:active {color:#C06 !important;}
y sólo ambiará de color en ese momento.
Si lo que quieres es resaltar la etiqueta que estás viendo (estoy en una entrada que tiene una determinada etiqueta), ahí se necesita alguna clase de script que identifique la página cosa que no es nada sencillo de armar.
He añadido la línea y no consigo el efecto deseado. Sólo en IE cambia al color que le indico, pero después vuelve al blanco. Si clico en otra etiqueta, entonces sí toma el color de link visitado. En los demás navegadores no noto ningún cambio. El efecto no es el deseado, pero es interesante: la etiqueta desaparece (el fondo es blanco) mientras la tengo activa, no está mal.
Como las etiquetas que están activas no son enlaces, deberías colocarles un color diferente del blanco que es el color que se usa ya que es el color por defecto del footer:
.cloud-label-widget-content span {color:alguno;}
Mejor con un color, tienes razón. Gracias.
Habrá alguna entrada referente a lo que decis en el 2do párrafo de tu comentario Nº 37?
No, no hay nada de eso; la única forma de saber a qué etiqueta pertenece una entrada es en el LOOP de entradas así que habría que guardarlas en alguna parte y lugo procesarlas. Demasiado trabajo para un resultado bastante escaso.
Entiendo. Preguntaba porque queda esteticamente mal la etiqueta, y no se puede cambiar aún colocando:
.cloud-label-widget-content span a:active {color:#el_color !important;}
Si lo que quieres sólo es cambiar el color de la etiqueta, podrías usar esto:
.cloud-label-widget-content span {
color: red;
}
con cualquier color, claro.
CHAN! No le habia dado estilo ahi. Mal yo :P
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...