Trucos para los link de texto [Decoración, trucos, efectos]

En el presente tutorial les brindare una serie de códigos para personalizar, decorar y dar estilo a los link de texto de una web o un blog. Nota: solo trucos para link de texto, próximamente link con imágenes. ¡Comencemos!.

1. Link básico de texto: el link básico que todos conocemos está compuesto por un simple código html, que nos permite enlazar una url. ejemplo:

<a href="http://josemanuel8924.blogspot.com">Blog archivador</a>

http://josemanuel8924.blogspot.com = la url, link o enlace
Blog archivador = al nombre del enlace

Vista Previa:
Blog archivador

2. Link que se abre en una ventana o pestaña diferente: se trata de un código html que permite al enlace ejecutarse en una nueva área de trabajo ventana o pestaña, solo tenemos que agregar al link básico el código target="blank" justo después de la url. Ejemplo:

<a href=http://josemanuel8924.blogspot.com" target="blank" >Blog archivador</a>

Lo resaltado en negrita = es el link y el nombre de dicho link o enlace

Vista Previa:
Blog archivador

3. Color de borde dinámico en el link: se trata de un codigo que permite la colocación de bordes al link, dicho borde puede cambiar de color al asomar el puntero del mouse. Este código tiene muchas variantes solo tenemos que ser creativos y utilizarlo según nuestra conveniencia. Este es el código, ejemplo:

<a href="http://josemanuel8924.blogspot.com/" onmouseout="this.style.border='solid 2px #c3c3c3';" onmouseover="this.style.border='solid 2px #c3c3c3';" style="solid 2px #bbbbbb';"> Blog Archivador</a>

Lo resaltado en rojo = el grosor del borde del link
Lo resaltado en azul = el color del borde predeterminado
Lo resaltado en verde = el color del borde del link al pasar el mouse
Lo resaltado en negrita = es el link y el nombre de dicho link o enlace
Nota importante: los colores están expresados en formato hexadecimal. Haz clic aquí para ver el código de todos los colores.

Vista Previa:
Blog Archivador

4. Link que sobresale: este truco es muy similar al de colocar borde al link, solo que esta vez no tomaremos importancia al color sino al contorno del borde. Este efecto es muy utilizado en una lista de link. Ejemplo.

Lo resaltado en rojo = el grosor del borde en estado predeterminado
Lo resaltado en azul = al grosor de borde que permitirá el resaltado [este debe ser mayor al borde prederterminado]
Lo resaltado en negrita = es el link y el nombre de dicho link o enlace

Vista Previa:
Josemanuel8924 | Blog Archivador

5. Link onmouseover: este link es muy peculiar ya que a diferencia de otros link este no necesita que hagan clic sobre el para activarse, el se activa con solo pasarle el mouse encima. veamos el código.

<a href="http://josemanuel8924.blogspot.com" onmouseover="window.location=this.href">Blog Archivador</a>

Lo resaltado en negrita = es el link y el nombre de dicho link o enlace

Vista Previa:
Blog Archivador

6. Colocar un link con cartel de información: se trata de un simple anexo al link que vallamos a utilizar, proporcionando un mensaje que se muestra en una cartelito amarillo . aquí se puede mostrar la información del link, algunas instrucciones, etc. Vayamos al código ejemplo:

<a href="http://josemanuel8924.blogspot.com" title=" haz clic aquí para entrar a mi blog"> Blog Archivador </a>

Lo resaltado en negrita = es el link y el nombre de dicho link o enlace
Lo resaltado en rojo = a la información que va a contener el cartelito informativo.

Vista Previa:
Blog Archivador

7. Link en forma de botón: se trata de un link en forma de botón imput, permite colocar un color personalizado al botón.

Lo resaltado con rojo = al color del borde
Lo resaltado en azul = el color de relleno del botón
Lo resaltado en negrita = es el link

Vista Previa:

8. Link en lista desplegable, menú de selección: como su nombre lo indica se trata de una conglomeración de link, bien organizadas en una simple lista desplegable. Exelente para una lista de web o blog amigos, archivos de la pagina hasta el menú de un blog. Chequemos el código, ejemplo.

<form>

<select name="links" onchange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value"><option selected="selected">Elija la sección que desee</option><option value="http://www.pauluk.8k.com">Pauluk Computación</option><option value="http://www.pauluk.8k.com/trucos.htm">Trucos PC</option><option value="http:/www.pauluk.8k.com/noticias.htm">Noticias Tecnológicas</option></select>

</form>

Lo resaltado en negrita = es el link y el nombre de dicho link o enlace. Expresado en colores diferentes para cada caso.

En caso de querer agregar otro enlace debemos colocar justo des pues de algún </option> el código:

<option value="http://www.pauluk.8k.com">Pauluk Computación</option>

Editar lo resaltado en color y listo..

Vista Previa:

9. Lista vertical de link: este código es muy utilizado en la web, es muy fácil de hacer. Veamos el ejemplo:

<ul>

<li><a href="url-de_la_pagina" >Enlace_1</a></li>

<li><a href="url-de_la_pagina" >Enlace_2</a></li>

<li><a href="url-de_la_pagina" >Enlace_3</a></li>

<li><a href="url-de_la_pagina" >Enlace_4</a></li>

</ul>

Editar lo resaltado en negrita, si queréis adicionar otro link copiar una cadena como esta:

<li><a href="url-de_la_pagina" >Enlace_5</a></li>

Vista Previa:

Como hemos visto estos trucos con link de texto se pueden conjugar unos con otros, solo hace falta la creatividad de cada uno de nosotros para hacer uno propio partiendo de nuestras necesidades. Espero comentarios y si es posible que el intercambio de códigos referidos los link de texto. Sus comentarios son bienvenidos.. espero que aprecien este post ya que ha sido una gran tarea de recopilación desde hace mucho tiempo.

Mostrar Palabras Claves de esta Entrada