Iconos de Suscripción que giran al pasar el cursor para Blogger y Wordpress

Hace un tiempo que diseñé unos botones de suscripción de redes sociales, hoy luego de hacerle unos cuantos cambios lo presento, siendo compatible tanto con Blogger como Wordpress, gracias a un pequeño fragmento de CSS los iconos de suscripción giran cuando se pasa el cursor encima de ellos.

Iconos de Suscripción que giran al pasar el cursor para Blogger y Wordpress
Iconos de Suscripción que giran al pasar el cursor para Blogger y Wordpress

Los iconos se ven de la siguiente manera:


Para añadir estos espectaculares iconos a Blogger (debes ir a Diseño, Añadir Gadget, HTML/JavaScript) y Wordpress (Widgets, Texto) pega el siguiente código:

<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 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>

Reemplaza lo resaltado en color naranja por lo que se indica en cada caso y guarda los cambios.

Como ves, es un tutorial sencillo pero muy vistoso, además el truco es personalizable y puedes añadir más iconos de otras redes sociales si así lo deseas ;).

Entradas que pueden interesarte

disqus