Infolinks In Text Ads


Crear nube de etiquetas

Este código lo pegaremos como gatget
<div class="nube-html">
<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.







0 comentarios to "Crear nube de etiquetas"

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...

------Select your language------

ArmenianEnglishFrenchGermanItalianPortugueseRussianSpanish

Recibe contenido en tu correo electronico:

Seguidores

Sueños

Significado de los sueños es un blog sobre la interpretacion de Sueños.