<<=Ya tengo cuenta en Picasa Web Albums Aquella lejana GataCam=>>

Icono en el propio link

| 2 comentarios | Sin trackbacks

Hoy he añadido el icono "" para hacer más fácilmente reconocibles los enlaces que llevan fuera de la web. Mi primera intención fue la de añadir el icono dentro o después del link, pero la idea no me gustaba. Quería poder modificar el icono a mi antojo, incluso hacerlo desaparecer, sin necesidad de reeditar las entradas (que ya es trabajo tocarlas para añadirlo). Al final he optado a hacerlo mediante CSS. Todos los enlaces hacia fuera de la web pertenecerán a una clase out, y es esa clase la que define todos los aspectos del enlace.

Como ya es costumbre, ahora el Cómo se hizo ( MakingOf).

Hoja de estilo:

1: .out {
2: background-image: url(outlink.png);
3: background-repeat: no-repeat;
4: background-position: bottom right;
5: padding-right:6px;
6: }

Código HTML:

1: Es <a href="#" class="out">una</a> prueba de <a href="#" class="out">estilo</a> <a href="#" class="out">out</a> para ver que tal sale.

Resultado:
Es una prueba de estilo out para ver que tal sale.


Actualizado 13/01/2008: Ejemplo para comentario de Anahi

Hoja de estilo:

1: .outl {
2: background-image: url(outlink.png);
3: background-repeat: no-repeat;
4: background-position: bottom left;
5: padding-left:6px;
6: }

Código HTML:

1: Es <a href="#" class="outl">una</a> prueba de <a href="#" class="outl">estilo</a> <a href="#" class="outl">outl</a> para ver que tal sale.

Resultado:
Es una prueba de estilo out para ver que tal sale.



Sin trackbacks

URL de TrackBack: http://res.mabarroso.com/bes/rbt.cgi/275

2 comentarios

Tengo un blog de blogger del que he hecho varias versiones en varios idiomas. Esto me plantea un dilema: Hay alguna manera de colocar AL LADO DE LOS LINKS iconos? ¿Se podría hacer desde el código de la plantilla ? Si es así, como podria hacerlo?

Un saludo

Anahí

Hay varias formas de hacerlo. Para colecciones de enlaces me gusta usar una lista (ul) y usar la imagen en cada elemento de la lista (li), pero siguiendo el ejemplo anterior, basta con modificar el css sin necesidad de tocar el html. Para no fastidiar el diseño del blog he cambiado el nombre del estilo, en vez de out, se llama outl. el código está al final del post porque no puedo usar html en los comentarios.

Escribir un comentario

Indica tus datos para dejar el comentario o usa tu cuenta