Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Nube de enlaces

NubedeenlacesHace tiempo descubrimos un truco muy interesante que nos permitía mostrar las etiquetas 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


Lista de blogs con movimiento personalizable en blogger

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.

Caiman dice...

Muchas gracias por el truco, me viene bien para mi blog, me gustan tus indicaciones porque son claras.

Joan Irazu dice...

me gusto, ya esta en mi blog :D

Jaime Trujillo Escobedo dice...

Muchas gracias a ti, Caiman, por el comentario y por haber instalado la nube.

Jaime Trujillo Escobedo dice...

Me alegra mucho que te guste, CHiCken, aunque no pude verlo en tu blog :S.

Joan Irazu dice...

jajajja esta en la sidebar, MY BLOGGER, pero como esta entre tabs (pestañas) en donde dice Etiquetas.

Concha dice...

Soy seguidora de tu blog. Por fin tengo mi nube!!!
Gracias

Jaime Trujillo Escobedo dice...

Cierto CHiCken! Gracias por instalarlo.

Jaime Trujillo Escobedo dice...

¡Qué bueno Concha! Y veo que has podido editar el color.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo