Codigo html para blogger de icono de redes sociales facebook con efecto gratis

Iconos de Suscripción en redes Sociales con efecto Zoom

En esta ocasión he creado un espectacular truco para tu blog, con el cual agregaras un pack de iconos de suscripción con efecto Zoom al pasar el cursor sobre ellos, el efecto zoom en los iconos es logrado gracias a CSS, mas exactamente por la propiedad hovergallery.

Los iconos sociales se ven de la siguiente manera:

Para agregar este truco a tu blog ve a Diseño, Añadir Gadget, HTML/JavaScript y pega lo siguiente:

<div class="separator" style="clear: both; text-align: center;">

<a class="hovergallery" href="URL de tu cuenta de Google Plus" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3AG5OGXVYKK6C2dSO2oJGPSxeZhXE9Xfu-emdHpaZFHbD0KpZ1NDFY_Bc-kY3HNNwBr3CcVbVIcCCeY1Ftno9Djr6OYS6ULGiCQiGhnhgg1JH1A9n3dzjPXVaxGCuF0HWumLJo-XmxdI/s1600/googleplus-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyq07pnlZmTqyQgCtJppcHOpRZLOdumG5lcnz1153LQyWygjo8t10Kbxh79xoVu6J2EKT0Oec8VXLIGWFJ3RD8X2PPbdenUb1r56TlTu64sdlDUYTpgUKX8oOQ7CzuT-Iu06gF8bIbZn4/s1600/facebook-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Pinterest" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_SIzgzPRVOtWBAxhu0503EA8Deg4d2u58Y58S49xBaIaIJM9GEe7G-Pv-jzeACeanGsyEs6JjRCyifeFZRZ8n9ZnXgj7p5Jc6gta4OvyWm7Ob18ml0Iu7gRsMuqMmN3M4Q4ONpCptNw/s1600/pinterest-64.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Twitter" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi02gKsjbrjI_Bec3mm6sOT_TE7OwCU3g6IbxPIiVt-7qWfWFQLBpazkBb_UVTKdusX6rOr4A_IZZ4_8ohWsowwNHVUFThXidr21pYSuEjOU66F-RHYd5_sRdkFuKlY13qSeWIQy7GlEQg/s1600/twitter-64.png" /></a> <a class="hovergallery" href="URL de tu RSS" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiypzFQ1F8GKWcFwWU2Iq4Rj4h06Cg3Z-JE-tAwBpf9cWtxnH8qyUj7yo6DQqIQU1ejUaWsz58XqamWp92yxkmEVWgZwwcW37c6bFr41_grZUfDw5ESS2L-xaHw6gu7a2MC48mgDPuic-0/s1600/rss-64.png" /></a></div>
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 1px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>

Ahora reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso y guarda los cambios.

Esperamos que te haya gustado este espectacular truco para tu blog y si quieres encontrar los mejores recursos no dudes en volver a visitar Mil Trucos Blogger

"la mejor forma de agradecer es compartiendo en tus redes sociales"

visita mi canal de yutube