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.

Un bonito efecto en los links o enlaces con JQuery

Esto es otro de los muchos efectos que podemos conseguir con JQuery. En este caso, conseguiremos que los enlaces del blog cambien de color al pasar el ratón lentamente.

Puedes ver un ejemplo del truco aquí, pasando el cursor por cualquier enlace que encuentres.

¿Te gusta el resultado? Si es así, sigue estos sencillos pasos:

Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta </head> y añade estos scripts encima:

<script src='http://jqueryui.com/latest/jquery-1.3.2.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() {
$(this).animate({ opacity: &#39;0.3&#39; } , 1000);
}, function() {
$(this).animate({ opacity: &#39;1&#39; }, 1000);
});
});
</script>

Los dos primeros scripts (jquery-1.3.2.js y jquery.min.js no tendrás que añadirlos una segunda vez si ya los tienes en la plantilla).

Guarda la plantilla para terminar:




Los colores que adoptarán los enlaces al pasar el cursor podrás personalizarlos en las siguientes líneas de CSS (las cuales pueden estar ya en tu plantilla):

a:link { color:#000000; text-decoration:none;}
a:active { color:#cccccc; outline: none;}
a:visited {color:#000000; text-decoration:none;}
a:hover { color:#cccccc; text-decoration: none;}

El código del color puedes reemplazarlo por el de cualquier otro, para ello utiliza la tabla de colores.

Si necesitas ayuda en cualquier otra cosa dímelo.

Nacho dice...

Muy bueno man

Jaime Trujillo Escobedo dice...

¡Gracias Nacho!

Itachi dice...

Hola Jaime:

He aplicado este efecto, pero al parecer se me bloquean aquellos gadgets en los que uso el scriptaculo.....¿es normal?.....

Un saludo

Jaime Trujillo Escobedo dice...

Itachi, al combinar Scriptaculous con JQuery en una misma plantilla obtenemos como resultado el mal funcionamiento del truco.

Probablemente y en breve publique una entrada en la que se explique la forma de utilizar ambas librerías al mismo tiempo.

¡Saludos!

El comentarista dice...

Increíble. It´s super!!! Yo lo he probado en mi blog, El diario de humor de un estudiante, y en la barra de suscripciones abajo de cada entrada hace un efecto inpresionante sobre todo. MUCHÍSIMAS GRACIAS!!! :D

Jaime Trujillo Escobedo dice...

El comentarista, veo que como bien dices, se ve de maravilla. Tu blog es muy original e interesante. ¡Sigue así!

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