Mil Trucos Blogger

Sensacionales iconos de redes sociales que giran

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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:




 


Sensacionales iconos de redes sociales que giran

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.

Si quieres agregar alguno de estos servicios solo debes tener en cuenta la siguiente estructura del código:
<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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

7 Comentarios

  1. agosto 15, 2014    

    Good!

  2. agosto 15, 2014    

    Muchas gracias

  3. agosto 26, 2014    

    Muy bueno, lo he puesto hace un momento. Gracias por el tuto… Pásate por el blog y échale un vistazo. http://almenas-waylander78.blogspot.com.es/

    • agosto 27, 2014    

      Amigo gracias por comentar, que bueno que el truco te haya funcionado.

      Que gran blog tienes,

      Saludos

  4. septiembre 28, 2014    

    Gracias amigo por ese diseño, saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo