Supongo que si habéis pasado este fin de semana por aquí, habréis visto mis nuevos iconos de redes sociales. Bueno, nuevos lo que se dice nuevos, no son, lo que he hecho es añadirles un efecto al pasar el ratón. Cambian de color, queda chulo ¿verdad? Hace tiempo que quería hacerlo y he aprovechado que tenía en borrador este tutorial para llevarlo a la práctica.

Es más sencillo de lo que parece, solo necesitamos dos imágenes del icono, una con el color que queremos que tenga al pasar el ratón y otra con el color normal. Y un sencillo código que añadiremos a nuestro gadget HTML/Javascript en el panel Diseño de nuestro blog para aplicar este efecto tan original.

El código que vas a necesitar para cada red social es éste:

URL DE TU PERFIL EN LA RED SOCIAL">URL DE TU IMAGEN NORMAL" onmouseover="this.src='URL DE TU IMAGEN AL PASAR EL RATÓN';" onmouseout="this.src='URL DE TU IMAGEN NORMAL';" />

No te asustes, que es muy sencillo, además, si ya pusiste tus iconos de redes sociales siguiendo los pasos que explicamos en esta entrada, seguro que el código te es familiar. Vas a necesitar subir tus imágenes a internet, usando dropbox, picasa o similares, ya que vamos a trabajar con los enlaces, no con las imágenes en sí.


Si quieres, puedes copiar la ruta de los iconos que te he dejado aquí abajo, no borraré esta entrada, así que puedes estar tranquilo que no desaparecerán de la noche a la mañana de tu blog.

ICONOS DE REDES SOCIALES PERSONALIZADOS

INSTALACIÓN

Muy sencillo.

Solo tienes que copiar el código del principio de la entrada dentro de un gadget HTML/Javascript dentro del panel Diseño de tu Blog. Puedes seguir los pasos de la entrada que te puse más arriba sobre como instalarlos, verás que no tardas nada. Pero usando este nuevo código si quieres que tengan el efecto de cambio de color.

Si te fijas, lo único que hemos cambiado del código que vimos la primera vez es esto:

onmouseover="this.src='URL DE TU IMAGEN AL PASAR EL RATÓN';" onmouseout="this.src='URL DE TU IMAGEN NORMAL';"

Lo hemos añadido detrás de nuestra imagen principal y es lo que le indica al navegador que imagen usar en cada momento, dependiendo de si el cursor del mouse está sobre ese icono o no.

EJEMPLO

El código para mi imagen de facebook sería este:

https://www.facebook.com/elperrodepapel">http://db.tt/GRKS3hW0" onmouseover="this.src='https://db.tt/ffFRpo9';" onmouseout="this.src='http://db.tt/GRKS3hW0';" />

Y el resultado sería el que puedes ver en la cabecera de mi blog.

Como siempre, espero que te sea útil y si te animas a instalarlo ¡me encantaría ver el resultado!