Iconos de Suscripción "Social Drop" que giran al pasar el cursor

Los iconos sociales son de las cosas que mas buscan los blogueros porque es bien sabido que un pack de iconos llamativos atraerán la atención del lector y con ello se aumentara la posibilidad de que dicho lector se suscriba a nuestras redes sociales, es por ello que hoy les voy a compartir un pack de iconos sociales en forma de gotas que he llamado "Social Drop" y que al pasar el cursos sobre ellos giran completamente.

Vista Previa del truco.

DEMO DEL TRUCO

Para crear este espectacular widget he usado CSS, mas específicamente la sintaxis transform: rotate .

Para agregar este truco en tu blog debes ir a Diseño, Añadir gadget, HTML/JavaScript y pegar el siguiente código:

<center><div id="socialicons"><a href="URL DE TU FACEBOOK" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9kGb3BSSZXmQwoqk54mJx41Y-6iBxUnjDTrk-kD0mnGIi8WSWm-LStyC7bWmBBV4Ix8R6gGZta5PvSO2QnUrxHMeCW43bSwdmihRgI4TgoH2JsokvK1mt00h3Iy_4qmd_BE1Sk_76qfl/s1600/Facebook-64.png" /></a><a href="URL DE TU GOOGLE PLUS" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUv4VCXVn_YSOy0KGJtq4Zpyh4_-_1wIXBnWIqhgDvOAbxod6LfP4E3H0a0zSYwbFHm2DRym3VsF3y_XU0f9xr7dSLd1CtbahdLoG54Ph2VgJ2R0vb3Swple88c9VwbjnGNSUxDCGvBUhK/s1600/Google-64.png"  /></a><a href="URL DE TU TWITTER" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNw-ayJmhWckrJDz-90BMFbypuTH6AYIzk_kLsdbR2GD1TwWbcvEw9aiem47PfKK57Sk9MHmTVFiQ0PCzPbHA19UKgB0VAfHSPAkY4c806Z-SwTmphQJ9QrPswKuoZy9-D0ff_Q5NR92Aj/s1600/Twitter-64.png"  /></a><a href="URL DE TU PINTEREST" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0VrGjBN_2DqxNBksBcVNPd3dGlvoDJotsw-C-0ywPNaXbj4BgxgJiKCyB_NTsKdVfrUaf8cLqqdClEMdFWDjljpAdctO-11Egz15JkaIZvx3RZi0L2Vxwr7CUt0iidryZfM7k7Qp-veOe/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 debes reemplazar lo que esta resaltado en color azul por lo que se indica en cada caso y por ultimo guardar los cambios.

Espero que te haya gustado estos espectaculares iconos de suscripción y que sigas visitando Mil Trucos Blogger (encontraras cientos de recursos para tu blog).