Tutorial de como ponerle Efectos a los enlaces | Makonico
La vida es mejor si usas un buen navegador. Rápido, Potentente, Seguro y Estable Mozilla Firefox es tu elección DESCARGALO
0

Tutorial de como ponerle Efectos a los enlaces

Quieres cambiarle color a los enlaces al pasar el mouse por encima?,subrayarlo o de lo contrario no subrayarlo?,que cambien de tamaño al pasar el mouse?,o que cambie el fondo por un color?

bueno no se hable mas este es tu sitio para buscarlo puedes añadir todos estos efectos con tan solo poner un simple código estos efectos son para que le den a tu web un toque genial de buen aspecto a tu blog.

empezemos

para añadirlo a tu blog o web debes pegar estos codigo antes de ]]></b:skin Añadir un fondo de color al pasar el ratón por encima:

<style type="text/css">
A:hover { color: white; background:blue }
</style>

cambia lo de zul por el color que desees puedes tambié poner el código exadecimal.

Cambiar el Tamaño del enlace al pasar el ratón por encima:

<style type="text/css">
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 18px }
</style>

Explicación

A:link { font-size: 15px } Es el tamaño del enlace como se muestra
A:visited { font-size: 15px } Tamaño que se mostrará el enlace después de haberlo visitado
A:hover { font-size: 18px } Es el tamaño al que cambiará el enlace al pasar el ratón

Cambiar de color al pasar el ratón por encima:

<style type="text/css"><br />A:hover { color: red }
</style>

cambia lo de rojo por el color que desees puedes tambié poner el código exadecimal.

Subrayar enlace:

<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>

Eliminar subrayado:

<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>

Por lo general estos efectos se aplican en toda la plantilla

pero para personalizarlo pega antes de </head>

<style type="text/css">
a:link { color: red; }
a:visited:link { color: green; }
a:hover:link { color: gray; }
a:active:link { color: blue; }
</style>


véase También

font-weight:bold; Combierte el enlace en negrita
font-style:italic; Combierte el enlace en cursiva

background:#0b5394; cambiará el fondo a color azul lo,lo pueden cambiar
background-image:url(http://dl.getdropbox.com/u/647003/stars.gif); mostrará unas estrellitas en el enlace

Con eso podremos peronalizar los enlaces de nuestro sitio a nuestro gusto.

0 OPINIONES:

TU OPINIÓN ES IMPORTANTE

Si tienes una consulta sobre un Artículo haz tu comentario

USA ESTA LINEA PARA DEJAR ENLACES

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

:-) :-S :-P :-[ :-D }:-] X* ;-D :-| :-} :*) :-( ;-) {¦D

ARTÍCULOS RECOMENDADOS

CARGANDO PÁGINA
FACEBOOK
TWITTER