Cómo hacer una nube de enlaces para blogger

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Nube de enlaces

Hace tiempo descubrimos un truco muy interesante que nos permitía mostrar lasetiquetas del blog en forma de nube 'flotante', que además, tenía movimiento y resultó ser una completa novedad en blogger.

En esta otra entrada voy a enseñarte a incluir una nube de enlaces en el blog, sin movimiento, pero totalmente personalizable y bastante atractiva.

La instalación es sencilla ya que únicamente requiere el uso de un gadget o elemento de página y además, los colores o tamaños podrán editarse.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el código necesario:

<div id="blnub">
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
</div>

<style>
#blnub{text-align:center; padding:5px;}
#blnub a{text-decoration:none;}
#blnub a:hover{text-decoration:none; color: #CC3366;}
#blnub .blink1{font-size:14px; color:#3399CC;}
#blnub .blink2{font-size:20px; color:#3366CC;}
#blnub .blink3{font-size:16px; color:#006699;}
#blnub .blink4{font-size:15px; color:#339966;}
</style>

En cada línea reemplaza DIRECCION PAGINA por la dirección del blog, la web o el artículo al que conducirá el enlace y TITULO por el título que aparecerá en la nube.

Si deseas añadir más enlaces a la nube, inserta líneas como esta (siempre antes del cierre </div>) :

<a href="DIRECCION PAGINA" class="blink3">TITULO</a>

Teniendo en cuenta que blink3 es un estilo distinto a blink1, blink2 y blink4 por lo que puedes editar el valor 3 para cambiar el aspecto del enlace.

Puedes cambiar el color de los enlaces editando el valor hexadecimal de las líneas 'color:#3399CC;' y haciendo uso de la tabla de colores.

Guarda el gadget para terminar.