.png "English"){kind=small}
En respuesta a "Sara",aprovecharé para hacer un pequeño "Tutorial" sobre la Nube de Etiquetas que ofrece Blogger,después explicaré como poder modificar los "colores" y "tamaño" de las Etiquetas,haciendo unas pequeñas modificaciones desde Plantilla.
La opción de mostrar las etiquetas en forma de nube directamente desde el mismo elemento Labels de Blogger,es una manera de aliviar un poco su plantilla,y aprovechar lo que nos ofrece Blogger.
1ºSi ya tenemos nube de etiquetas de blogger nos saltamos este paso y el segundo,de lo contrario,vamos a Diseño,Elementos de la página,Añadir un gadget (como se ve en la imagen):
2ºAgregamos,o añadimos "Etiquetas"(dándole al "+" azul)y guardamos.
3ºUna vez agregadas la "Etiquetas"entramos en ellas en "EDITAR",Seleccionamos el numero de etiquetas que queremos mostrar,y en opción "Lista o Nube",seleccionamos "Nube",y guardamos.
*Hasta aquí ya tendremos una Nube de Etiquetas:
El resultado será una nube con ciertas características 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;}Ahora veremos como editar el color y tamaño,buscando algo más de personalización,y estilo,pudiendo adaptar el color de las mismas al diseño de color de un Blog.
*En Diseño,Edición de HTML,Plantilla,buscaremos con teclado "Ctrl (Control) + F" lo siguiente:
Como estos estilos se cargan automáticamente, debemos sobreescribirlos 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>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>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,así según el numero de etiquetas que queramos mostrar seleccionar "5",o un numero superior,10,20,30,etc.
*Para modificar "el color" de las etiquetas recordar que los códigos de color son estos:
{color: #789;
{color: #89A;
{color: #9AB;
{color: #BCD;
{color: #DEF;*Así por ejemplo el color que nos pedía
"Sara" para sus etiquetas era el "Rosa",púes el código de color seria el siguiente: #DF0174*Para elegir el código de color y modificar los colores,HTML color codesle proporciona herramientas gratuitas de colores para encontrar colores HTML para web o blog,tabla de colores HTML dinámica para conseguir códigos HTML para los colores.Haga clic en cualquier cuadro de color para conseguir el Código de color HTML.
¿Como poner una imagen de fondo o color diferente a ETIQUETAS,para obtener el deseado?:
Bien es sencillo:
1º En "Edición de HTML",de la plantilla,Buscamos con el metodo "Control + F" de nuestro teclado,lo siguiente:
b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>2º De esa parte copiamos: "Label1" para ahora buscar: ]]></b:skin> y justo antes poner esto:
#Label1{
background: #XXXXXX;
} *NOTA:
Si en la "id=" pone diferente a "Label1" en mayusculas,o de otra forma deberemos poner igual antes de ]]></b:skin>
El color de fondo de etiquetas se cambia con el código de color: #XXXXXX según queramos puede ser: Rosa= #DF01A5 Azul=#0000FF Verde=#01DF01 etc.
3º Si lo que queremos es una imagen de fondo en las etiquetas,lo que hemos de poner antes de ]]></b:skin> es lo siguiente:
#Label1{
background: url(URL-DE-TU-IMAGEN)Center ;
}*Por ejemplo quedaria así:
#Label1{
background: url(http://2.bp.blogspot.com/-MLpi_x_Zlco/Tz-XI7apZuI/AAAAAAAAKlw/RUXhhBfL2Es/s1600/rosa_y_lineas_radiales_anaranjadas_plantilla_de_e_folleto-p244967722152659394z85cm_400.jpg)Center;
}*Importante que "previsualizemos",para ver el efecto,y una vez comprobado guardamos plantilla.
*Así tendremos una Nube de Etiquetas personalizada diferente a todas,con los medios que Blogger nos ofrece.
9 comentarios:
Saludos!
Acabo de aplicar la nube de etiquetas en mi organización de gadgets. Saludos :)
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í.
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,
gracias
Chema:
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.
;)
Definitivamente sí y ya funciona a las mil maravillas. Lo primero agradecido con sinceridad.
!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
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!!
el Tutorial es largo...pero recomiendo leerlo y aplicarlo hasta el final sobre todo la ultima parde de las etiquetas para poner un fondo o imagen y cambiar colores y tamaños de las etiquetas
según veo es la mejor opción a una nuve de etiquetas que se puede encontrar,y es fácil y funciona 100% bien,
Muy agradecida ,)
Me alegro guste ;)
Queda muy bien :* :A
excelente post. espero sigas escribiendo.
Gracias por comentar.
El comentario se publicará en breve.