Iconos de redes sociales que cambian de color

septiembre 30, 2013



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á:

7 pensamientos ¡falta el tuyo! ;)

  1. Qué bien! Me encantan estos post. Muchas gracias por enseñarme tanto!
    Bss
    Sara

    ResponderEliminar
    Respuestas
    1. ¡¡gracias a ti!! Me alegra que te sea útil, Sara ;)

      Eliminar
  2. Me encanta tu blog, y tu página de facebook!!! you're the best!!!

    http://lulusweetsinbarcelona.blogspot.com

    ResponderEliminar
  3. ¿Y que habría que poner si quiero que, al pinchar en el icono de facebook por ejemplo, se abra pero en otra página? Gracias por compartir lo que sabes! :)

    ResponderEliminar
  4. Lo he conseguido!! Había un icono que se me resistía, y por una comilla repetida. Pero lo que no me sale es el nombre de la red social cuando paso el ratón por encima, seguro que no es complicado añadirlo. Voy a curiosear por tu blog a ver si lo tienes explicado en otra entrada. Gracias por el tutorial. Bss.

    ResponderEliminar
  5. ¡¡Ya puedes ver las dudas resultas de este tutorial!!

    Click aquí --> http://www.elperrodepapel.com/2015/02/consultoria-blogger-resolviendo-dudas.html

    ¡¡Gracias y feliz finde!! ^^

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.