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="http://4.bp.blogspot.com/-CZG1HDcpgBY/VARY1edSD3I/AAAAAAAAB9Y/FJhzq5eRzyI/s1600/google-plus.png" width="48" height="48"/></a>
<a class="zoom" href="URL de Facebook" target="_blank"><img src="http://1.bp.blogspot.com/-Hfns3gNZmJs/VARY1dchO-I/AAAAAAAAB88/qxuY8OxSbfg/s1600/facebook.png" width="48" height="48" /></a>
<a class="zoom" href="URL de Twitter" target="_blank"><img src="http://4.bp.blogspot.com/-1JXUuCYGwkI/VARY23ZXwEI/AAAAAAAAB9U/zyviMS-YV74/s1600/twitter2.png" width="48" height="48" /></a>
<a class="zoom" href="URL de Pinterest" target="_blank"><img src="http://2.bp.blogspot.com/-S-QB5Ui4F14/VARY2I9IfWI/AAAAAAAAB9M/0GZms7dDaec/s1600/pinterest.png" width="48" height="48" /></a>
<a class="zoom" href="URL de RSS" target="_blank"><img src="http://2.bp.blogspot.com/-ofUSYiYoEno/VARY2olth7I/AAAAAAAAB9A/Mmx2IDcKquY/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í♥