Iconos de Redes Sociales Giran al Pasar el Cursor




Efecto muy interesante porque giran los iconos.

En esta ocasión, Planeta Blogger le trae un efecto muy interesante que mejorara notablemente la estética del Blog.

Se trata de un Gadget, que al pasar el cursor sobre los iconos de las redes sociales, produce en ellos el efecto de girar sobre su propio eje, lo que obviamente es atractivo visualmente al visitante que le invitará a suscribirse. 

Para ponerlo en el blog nos vamos  a Diseño / Añadir un Gadget /  HTML/JavaScript.


Un Gadget que al pasar el cursor sobre los iconos de las redes sociales


En la ventana, ponemos un título (Opcional): 



En la ventana, ponemos un título

Para terminar pegamos el siguiente código: 

<center><div id="socialicons"><a href="URL del Facebook" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGnF1z4VYW3saQhkWZIa5fBRD-Fi1HO0uxjMqY2YpmpZMz9Z-kPlX9LCBqdsIUUpwBoNw1H_igvPbWJONY-CtS5DrZ9dPGkPM6p5lWl4wfN6ao_Sc8bVgUiFVPwNjgysKhqbX6QNJsle4F/s1600/Facebook-64.png" /></a><a href="URL de Google+" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFluzi-_6TZlbHSMcTbXPzDOgw3FeRrXHOCsUP2A81DusjJOBF3lPAyj3V0GgNe8hbWCVCDURVzdlbnp_bCrJxC24vJA_JZgNjRJ-_hFNUuF1dHxnWDx-VXOZkVelZk0isRJuB5J6fTr-z/s1600/Google-64.png"  /></a><a href="URL de Twitter" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm-lWQXt_IqbKQyBxowYZfVizLajUVcI4E8FZp3dTsoywFsfNmmaVaTkQnv1Ybh-_uIh_V0Ftr6QjTJ8EDBzySJuwvUJWmE_B0Yubwg0dF_3sSqpcjHWlBF4fcr_5_OhyVL5y2IS_l-_Pk/s1600/Twitter-64.png"  /></a><a href="URL de Pinterest" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGzFTWdOBkHbkQt6ZmBdu4vu2S4i7oaktnKypDHfYHHwBeFSjUcA0kniOcq2C9OFeUZjwfekjL7qhjj1XR7iZX-ziOJc80fC_Ee4hoVocsvi9aD5-GyloZVeULLNUcbkHqX64RqDymG8Dk/s1600/Pinterest-64.png" /></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 debemos cambiar lo que esta  en color Rojo por nuestra URL.

 En donde está en Azul ponemos la dirección del Icono (si queremos cambiarlo) y  último guardamos los cambios.

VEA EL DEMO AQUI.

Eso es todo.

Planeta Blogger

Nadie conoce toda la amargura de lo que aguarda en el futuro. Y si de pronto apareciera como en un sueño, la negaríamos apartando los ojos de ella. A esto le llamamos esperanza.