Infolinks In Text Ads
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.
miércoles, 2 de noviembre de 2011
// //
0
comentarios
//
0 comentarios to "Crear nube de etiquetas"
Seguidores
Sueños
Significado de los sueños es un blog sobre la interpretacion de Sueños.
Publicar un comentario