MASTER ICONS- Iconos de Suscripción que giran al pasar el cursor

Hacía ya mucho tiempo que no dedicaba tiempo a diseñar nuevos trucos de botones sociales, así que hoy que he tenido algo de tiempo libre decidí hacer unos iconos de suscripción para Blogger (también sirven para Wordpres 😛 ) que con un pequeño efecto CSS giran cuando se pasa el cursor por encima de ellos.

MASTER ICONS- Iconos de Suscripción que giran al pasar el cursor

Este truco hace uso de la sintaxis CSS transform: rotate . para lograr el efecto de rotación:

MASTER ICONS- Iconos de Suscripción que giran al pasar el cursor

Para agregar este truco a tu blog de Blogger, ve a Diseño, Añadir Gadget, HTML/JavaScript, estando allí pega lo siguiente:

<center><div id="socialicons">
 <a href="URL DE TU PERFIL DE FACEBOOK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://2.bp.blogspot.com/-fCIyfKgRG9I/WOkNg652-1I/AAAAAAAAJa0/fFL27VTZ9PErVNetjfqy7-JYlxrjwWnTgCLcB/s200/facebook.png" width="50" /></a><a href="URL DE TU PERFIL DE G+" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://4.bp.blogspot.com/-ReYivXfEZ8c/WOkNiAG3tqI/AAAAAAAAJa4/HlkD9R0pep8vxHmZI8iJ51SnZRTcyIpkwCLcB/s200/google-plus.png" style="cursor: move;" width="50" /></a><a href="URL DE TU INSTAGRAM" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://4.bp.blogspot.com/-Fw6R2VloL8Q/WOkNkN5JnLI/AAAAAAAAJa8/c2M2CC2MjxEDrANhI_lf2e6mQFEeKTfigCLcB/s200/instagram.png" width="50" /></a><a href="URL DE TU TWITTER" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://1.bp.blogspot.com/-cFLUkY45VtE/WOkNmgXaBTI/AAAAAAAAJbE/jMIVm5JRVC4nJnyypThqx5pHd-bqp6LIgCLcB/s200/twitter.png" width="50" /></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>

Ahora solo debes reemplazar lo resaltado en color verde por lo que se indica en cada caso (las URL’s de tus redes sociales) y guardar los cambios.

El gadget ya funcionando se ve de la siguiente manera:

Es un sencillo gadget que hice con un pack de iconos y algo de CSS, pero son bonitos y llamativos visualmente, por lo que alguno le puede gustar y porqué no compartirlo en sus redes sociales 😉