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.
0 comentarios:
Publicar un comentario