Sensacionales iconos de redes sociales que giran

Hola amigos de Mil Trucos Blogger, en esta oportunidad quiero compartir un pack de iconos que hice hace poco y que creo me han quedado muy bien, aunque claro está que yo los veo bien porque los hice yo 🙂 .

Pero la novedad de este truco es que los iconos giran cuando se posa el cursor sobre ellos; bien dicen que vale más una imagen que mil palabras, así que qué mejor de mostrarles el truco que demostrarles a continuación como funcionan:

 

Para agregar este truco en tu blog pega en un elemento HTML/JavaScript lo siguiente:

<center><div id="socialicons"><a href="URL DE TU FACEBOOK" target="_blank"><img  src="http://www.miltrucosblogger.com/wp-content/uploads/2014/08/Facebook.png" /></a> <br />
<a href="URL DE TU GOOGLE PLUS" target="_blank"><img  src="http://www.miltrucosblogger.com/wp-content/uploads/2014/08/Google-2B-2B.png"  /></a> <br />
<a href="URL DE TU TWITTER" target="_blank"><img  src="http://www.miltrucosblogger.com/wp-content/uploads/2014/08/Twitter.png"  /></a> <br />
<a href="URL DE TU PINTEREST" target="_blank"><img  src="http://www.miltrucosblogger.com/wp-content/uploads/2014/08/Pinterest.png" /></a> <br />
</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>

Ahora debes reemplazar lo que está en azul por lo que se indica en cada caso.

He realizado un par de botones más de otras redes sociales, pues muy seguramente habrán algunos usuarios que lo van a necesitar.

<a href="URL DE LA RED SOCIAL" target="_blank"><img  src="URL DE LA IMAGEN QUE QUIERAS" /></a> <br />

En azul está resaltado lo que debes poner en cada caso; además recuerda poner esté código justo antes de

</div></center>

Espero que este tutorial te haya gustado; no olvides compartirlo en tus redes sociales.