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

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 😀

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *