undefined
undefined

Crear nube de etiquetas

Este código lo pegaremos como gatget

<a style="color:#9b2230; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#000000; font-size: 14px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 42px;" href="#">TEXTO</a>

<a style="color:#999999; font-size: 17px;" href="#">TEXTO</a>

<a style="color:#d85564; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 18px;" href="#">TEXTO</a>

<a style="color:#8B8386; font-size: 16px;" href="#">TEXTO</a>

<a style="color:#d85564; font-size: 11px;" href="#">TEXTO</a>

</div>

Añadiremos tantas líneas como etiquetas deseamos añadir.

En color:#000000;es el color del enlace.

Sustituimos TEXTO por el nombre de cada etiqueta.

La almohadilla # la sustituimos por la url que corresponde a cada etiqueta.

Con font-size: 00px; es el tamaño de la fuente.

Para conseguir la url de cada etiqueta, hacemos click sobre una etiqueta de nuestro blog y se mostrarán todas las entradas con esa etiqueta, copiar la url que aparece en ese momento en la barra del navegador y pegarla sustituyendo el asterisco #

Una vez obtenidos los enlaces creados guardamos los cambios y nos vamos a plantilla Edición de HTML, buscamos ]]> y debajo añadimos lo siguiente:

.nube-html {
border: 1px solid #333;
background: url('url.imagen.fondo') repeat;
margin: 10px 0 10px 0;
line-height: 30px;
text-align: center;
padding: 2px;
padding-top: 10px;
}
.nube-html a {
text-decoration: none;
}
.nube-html a:hover {
border-bottom: 1px dashed #ccc;

Podemos añadir una imagen de fondo a la nube en "background" y borde en "border"

Para que al pasar el ratón sobre el enlace se produzca un efecto hover añadí en "a:hover" border-bottom: 1px dashed #ccc; que lo podemos sustituir por cualquier otro efecto.