Hola amigos de Mil Trucos Blogger, ya he publicado varios trucos de iconos sociales y el del día de hoy voy a compartir un genial pack de iconos sociales que giran al pasar el cursor encima de ellos.

Excelente pack de iconos sociales que rotan

Los iconos se ven de la siguiente manera:

 





Para agregar este truco a tu blog solo debes agregar en Diseño, Añadir gadget, HTML/JavaScript  lo siguiente:

<center>
<div id="socialicons">
<a href="URL DE TU FACEBOOK" target="_blank"><img src="http://1.bp.blogspot.com/-WREFtplh-B8/Vhwb2q1J6yI/AAAAAAAAGPM/hPESiF743vk/s1600/Facebook_48x48x32.png" /></a> <br />
<a href="URL DE TU GOOGLE PLUS" target="_blank"><img src="http://2.bp.blogspot.com/-sqUW5-sZV_0/Vhwb3uXc2lI/AAAAAAAAGPY/LmAQGSntCg8/s1600/GooglePlus_48x48x32.png" /></a> <br />
<a href="URL DE TU TWITTER" target="_blank"><img src="http://3.bp.blogspot.com/-5xh6kxTalZo/Vhwb89HhDzI/AAAAAAAAGPw/_bEdd80GbNk/s1600/Twitter_48x48x32.png" /></a> <br />
<a href="URL DE TU PINTEREST" target="_blank"><img src="http://4.bp.blogspot.com/-IhTrUSv05OU/Vhwb6d_f3OI/AAAAAAAAGPo/ggho0hatwm0/s1600/Pinterest_48x48x32.png" /></a> <br />
<a href="URL INSTAGRAM" target="_blank"><img src="http://4.bp.blogspot.com/-DHK9Zh4SRIw/Vhwb5HZJLcI/AAAAAAAAGPg/Ydd9JFKlgMA/s1600/Instagram_48x48x32.png" /></a> </div>
</center>
<style>
#socialicons img{
 -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;}
#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
</style>

 

Reemplaza lo que está resaltado en color azul por lo que se indica en cada caso.

Categorías: Tutoriales Blogger

0 comentarios

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 *