En el mundo del diseño web se pueden lograr grandes efectos con pequeños trozos de códigos como el ejemplo que les voy a mostrar hoy, iconos sociales con efecto mouse over, esto quiere decir que cuando se pasa el cursor por encima de una imagen se muestra otra; el truco se ve de la siguiente manera:
Iconos Sociales con efecto Mouse Over
Para agregar este truco a tu blog añade el siguiente código en la parte de tu web que quieras que se vea:
<a href="URL FACEBOOK"><img src="http://3.bp.blogspot.com/-eyCg8VyhqQI/Uy8F9r60xCI/AAAAAAAAD0E/sQ82sCRQc3Y/s1600/facebook-64.png" onmouseover="this.src='http://4.bp.blogspot.com/-VdH6BA280WM/VOo4U1QIWQI/AAAAAAAAFQQ/TR3vJ-yXCKc/s1600/facebook.png'" onmouseout="this.src='http://3.bp.blogspot.com/-eyCg8VyhqQI/Uy8F9r60xCI/AAAAAAAAD0E/sQ82sCRQc3Y/s1600/facebook-64.png'" /></a> <a href="URL TWITTER"><img src="http://2.bp.blogspot.com/-JtCjmiY5Jl8/Uy8GGiqq9sI/AAAAAAAAD0k/WIXtHNHxOw0/s1600/twitter-64.png" onmouseover="this.src='http://4.bp.blogspot.com/-ikMLvB5W4MA/VOo4U_VBqrI/AAAAAAAAFQU/1GltTA054G0/s1600/google.png'" onmouseout="this.src='http://2.bp.blogspot.com/-JtCjmiY5Jl8/Uy8GGiqq9sI/AAAAAAAAD0k/WIXtHNHxOw0/s1600/twitter-64.png'" /></a><a href="URL GOOLGE+"><img src="http://4.bp.blogspot.com/-J6FGCxIRNxs/Uy8F_DZ3N9I/AAAAAAAAD0M/lD7cMz_fq_4/s1600/googleplus-64.png" onmouseover="this.src='http://2.bp.blogspot.com/-ndlmokv4Qf4/VOo41kk0YXI/AAAAAAAAFQg/BwKSLX6IFy0/s1600/twitter.png'" onmouseout="this.src='http://4.bp.blogspot.com/-J6FGCxIRNxs/Uy8F_DZ3N9I/AAAAAAAAD0M/lD7cMz_fq_4/s1600/googleplus-64.png'" /></a>
Ahora reemplaza lo resaltado en color azul por lo que se indica en cada caso, guardas los cambios y listo.
Espero que este tutorial te haya gustado y no olvides compartirlo en tus redes sociales.
6 comentarios
dança do ventre · febrero 23, 2015 a las 3:11 pm
Gostaria de tutoriais de Menu Vertical com efeito acordeon com sub abas. Procurei aqui no mil truques, mas só encontrei horizontal!
Hayder Juvinao · febrero 24, 2015 a las 8:13 pm
Olá danca do ventre, de bom grado, eu o farei menu vertical tutorial para você.
Saudações
dança do ventre · febrero 23, 2015 a las 3:16 pm
Gostaria de um tutorial sobre como dividir as postagens da pagina inicial em box, de maneira que possa personalizar! Obrigada
Hayder Juvinao · febrero 24, 2015 a las 8:26 pm
Ok feliz em fazer o tutorial.
Miguel · abril 13, 2015 a las 10:19 am
No me funciona, cuando lo pego en mi widget lo unico que se ven son 4 cuadrados de las redes sociales pero no las imagenes.
Juvinao · abril 13, 2015 a las 6:54 pm
Hola Miguel podrías indicarme en que blog se presenta este error.
Saludos 😀