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:

<a href=”URL DE TU PERFIL EN LA RED SOCIAL“><img width=”60″ height=”60″, src=”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’;” /></a>

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

Facebook

Twitter

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:

<a href=”https://www.facebook.com/elperrodepapel“><img width=”60″ height=”60″, src=”http://db.tt/GRKS3hW0″ onmouseover=”this.src=’https://db.tt/ffFRpo9′;” onmouseout=”this.src=’http://db.tt/GRKS3hW0′;” /></a>

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!



Suscríbete a mis entradas por email ¡para no perderte nada!

♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

Pin It on Pinterest

Share This

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)