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!
Qué bien! Me encantan estos post. Muchas gracias por enseñarme tanto!
ResponderEliminarBss
Sara
¡¡gracias a ti!! Me alegra que te sea útil, Sara ;)
EliminarMe encanta tu blog, y tu página de facebook!!! you're the best!!!
ResponderEliminarhttp://lulusweetsinbarcelona.blogspot.com
¡vaya Lulu! Muchas gracias :D
Eliminar¿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! :)
ResponderEliminarLo 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¡¡Ya puedes ver las dudas resultas de este tutorial!!
ResponderEliminarClick aquí --> http://www.elperrodepapel.com/2015/02/consultoria-blogger-resolviendo-dudas.html
¡¡Gracias y feliz finde!! ^^