Iconos Sociales con efecto zoom


Aquí te mostraré cómo agregar estos iconos a tu blog, para que vincules tus perfiles sociales con efecto zoom.

Ir a Diseño en "Añadir un gadget", seleccionar 'Html Javascript' y pegar el código que dejo abajo, solo hay que reemplazar lo que esta en en rojo por la URL correspondiente y guárdalo.

 Este es el código:


<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://plus.google.com/u/0/t="_blank"> <a class="zoom" href="URL de GooglePlus"_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX-Q45ta-Kk8X0olUSpfD_mM3o4Wbc8OFPF2Y3PgcSud4c7uUMkyYI4AYy8iiIlbwLgycsc1HlLgqIoRPhLJLHiQepnTpqMZwDGTem8Us7qWeZPIFNjU5bYbD30ptpw1NUb3uR_iPEEI/s1600/google-plus.png" width="48" height="48"/></a>
<a class="zoom" href="URL de Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-p4sWm2F0ic4AM9IZtDPvXz9qwK1nsu-ufb99XroM_85sAkhs2MxvgFcnNu0EiHqd9G_ZLt1l4X6QMZ7dECl4qdasn76Ee5znh4Bp-Llp4jLzujptShwKPFV15FYiEE17rssIYfMZ2us/s1600/facebook.png" width="48" height="48" /></a>
<a class="zoom" href="URL de Twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ5TuE3aVW-pII1FMjg_Tb7WwZBBS_6J5w-eBSmmi_iXCSNfYbLVyhBCoQN2KACrL351zHSt5nAFcB5FbHo3DJ6t_8jWarNcgtwPFEPy4NYKa8UFvnRZmOG0F4y11FMf7CLKdL6jRdnVw/s1600/twitter2.png" width="48" height="48" /></a>
<a class="zoom" href="URL de Pinterest" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwSFwxlDubIUFM9vbPodbMPgl1Sd7_2JPtr50lPjbRZ5RRZxxelSqaZzF2-37Brdo3A5r_wy5Fm5woKo3UI95rtoUZ0ngYMC9E-k5loTQKQs5-lmSn4DTelqZOwncHkzRTGFtfLQnwrg/s1600/pinterest.png" width="48" height="48" /></a>
<a class="zoom" href="URL de RSS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJOdUDYJ4Ox2KmzEVsUDA82YZdLrePi7QFKCGOlQRg95rkwSbhhkOZFAcsdfowPxBekTdAHmH8_GYiOdJUHQgVRKctL_LH6UqEhfExdanfbaJvkv3gk39_d3O7N9rqMX2P4sP1ehLbeEM/s1600/rss.png" width="48" height="48" /></a>
<style type="text/css">
.zoom img{
margin: 5px 3px 3px 2px;
text-align: center;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}
.zoom img:hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
}
</style>




Este es el resultado:




No hay comentarios:

Publicar un comentario

✭¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥