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.

Categorías: Redes Sociales

7 comentarios

Nicolás Ramón · agosto 15, 2014 a las 8:32 pm

Good!

kiko Mega · agosto 15, 2014 a las 9:42 pm

Muchas gracias

Toni Grimal · agosto 26, 2014 a las 4:03 pm

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/

    Hayder Juvinao · agosto 27, 2014 a las 9:38 pm

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

    Que gran blog tienes,

    Saludos

Estrenos De Cine HD · septiembre 28, 2014 a las 4:37 am

Gracias amigo por ese diseño, saludos

Responder a Nicolás Ramón Cancelar la respuesta

Marcador de posición del avatar

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