ICONOS SOCIALES PARA BLOGGER CON EFECTO MOUSE OVER

ICONOS SOCIALES PARA BLOGGER CON EFECTO MOUSE OVER

"TECLEANDO PARA TI 2019"

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 un gadget HTML/JavaScript y pegar allí lo siguiente: en la parte de tu web que quieras que se vea:

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

 Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

<a href="URL FACEBOOK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N2tfIZRq_PQoablpBtMP9XyPpkD1hZKZE2Y2MVedNK_8BodXu8VnzSUvw5qOXIGmQ3cOAvulfcCZbqR7NYfhnmBomhgvjPCtgyqOE-ezpjnMm4crb8Kqh7w2PWVesykoCHbswD8U3ow/s1600/facebook-64.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCyhAN6Q_EKj4Nc-_mlU8bnMRmoDzZqSPmsugLZl60bSWIcVCgbAt_7zr92uUTdhEZD1Ek9ib9mxP81SQNuyxv-glc1mU6OUd9kcs6SRKM4QTlxMaoJsDAFmp9rthmrONCTX_K9fwk-8/s1600/facebook.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N2tfIZRq_PQoablpBtMP9XyPpkD1hZKZE2Y2MVedNK_8BodXu8VnzSUvw5qOXIGmQ3cOAvulfcCZbqR7NYfhnmBomhgvjPCtgyqOE-ezpjnMm4crb8Kqh7w2PWVesykoCHbswD8U3ow/s1600/facebook-64.png'" /></a> <a href="URL TWITTER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheM37rJKyfurqBiJtvCTPeUfMczSIXyNwxEqCHXC56rcWCYBzKd9PFMU0PJPFoRcJ1zkZg_hogHWfBX7sG_NLlU7WQeckfp22pXHT9I17MPHVKQhl4KyD4jf62hM-5QfQOpEgYbN22GCw/s1600/twitter-64.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuG9rhzJ3u9wHOQ_E1t8ngZMp7rsjt4auoKdrPx4nP8x_OLnlE1IihgvqmYLha8-ObkK7g74eFiCBTCDIwgOg3e9aK1yD5w26uIU3IkavDrOayir00dal09-lVGwN9cCs2-npLIi78Tls/s1600/google.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheM37rJKyfurqBiJtvCTPeUfMczSIXyNwxEqCHXC56rcWCYBzKd9PFMU0PJPFoRcJ1zkZg_hogHWfBX7sG_NLlU7WQeckfp22pXHT9I17MPHVKQhl4KyD4jf62hM-5QfQOpEgYbN22GCw/s1600/twitter-64.png'" /></a><a href="URL GOOLGE+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcr5ARh0nVgd4QwTi8qA0N-JbyFOjUU0ZFTLPi50IaCpHypdDRfv0f3gzCYubyBDj6tRUZvUCnWUlhZEdA_QskK0nzpm8k7PlApo4WquVE_7eHhdJZHxtI-reRAEdUN00l9OfUKDLWnw/s1600/googleplus-64.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55yW7LAiYRkh9o1mv2kgB1ip-eDshm7JUq4KCh6DOKIrZEpyp83fR_YomjZkhrybF6VCDqBFRrs9vmFLfYtn4ur6yUKOvbePxro67k2Org5XAsl_oS80HJX75Ic6Dx5m-Vra29IPHgHI/s1600/twitter.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcr5ARh0nVgd4QwTi8qA0N-JbyFOjUU0ZFTLPi50IaCpHypdDRfv0f3gzCYubyBDj6tRUZvUCnWUlhZEdA_QskK0nzpm8k7PlApo4WquVE_7eHhdJZHxtI-reRAEdUN00l9OfUKDLWnw/s1600/googleplus-64.png'" /></a>

hora reemplaza lo resaltado en color azul por lo que se indica en cada caso, guardas los cambios y listo.

Después de haber insertado el código, un clic en "Guardar"

Data: 04/10/2019

Fuente: miltrucosblogger

Publicado por: