En esta oportunidad les quiero compartir un pack de iconos sociales en forma de huevos que giran 360 grados al pasar el cursos sobre ellos.
En el pack vienen incluidos los iconos de Facebook, Google +, Twitter, RSS FEED y Yahoo!.
Pueden ver el truco funcionando aqui :
Para agregar este truco en tu blog pega en un elemento HTML/JavaScript lo siguiente:
<center><div id="socialicons"><a href="URL FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegLehyphenhyphenC8w-M6emiYtmyYWbz0Wr1Ri1nhyYhtTYMIqUYrkpG-72z8EvTmppopqs0ENYOUE5JMAGZOU5UaQIjxrX9Hr7r1q61HKiCr6M8KCyjv4Ngcara0KYYtRvUPE1woiDmGyRQyHV5E/s64/facebook.png" /></a><a href="URL GOOGLE PLUS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdht2CnH8Dw6JmaHg5WNVfDmo_38T-zC_vrQzHyYOpyjMwS1CxPpm6yMeVSY7Bq2EL7IOdeMrm3rqYemqSWkP0cxEFk_cfH4p7reZv9KvU0zDK_kVql0WsxFEmr03cd3eS-lo1bdaRPQ/s64/google%252B.png" /></a><a href="URL TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR3aiW2D3x6WrhS11Gyi7d6em9jHdE2qESilIBnXvD64guG4O8pJ-23DqMzCQhAwjdfRYjh_gBYwSPcIguvlSBAT4jTLiIICRg-vSHcZo57GOVfSJeanqDSkXKQkUxc0mamDOyIXQsI9s/s64/twitter.png" /></a><a href="URL FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog6q2ZeAf6ZNZ-aBettttj8y0uH27vBQTi3pmhpte8TOyYhnoviPfvwoMarWk6FX_GzV9rSc-tRq2LYG8Wr32P4uxuJx8VTI8rg5o7NZi_BNp3Ih614GDBknomnxc9kJVPDMjpnaMDiU/s64/rss.png" /></a><a href="URL YAHOO" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaq82qPUV4h9Xorvuh6oUyNm9oB4WPY5_05XbT_dBBOTDa0oKnne8I00rxSUIJlKQ1Zqgh8f9qVLqTKY47RGiSLs42VYNk10toTc5qrtHwyzS8xxZ2kFzj_waXY1ZvjNIcwYBO7l4941s/s64/yahoo.png" />
</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 cambia lo que esta en
color azul por lo que se indica en cada caso.
Espero que les sea de agrado este pequeño truco y sigan visitando
Mil Trcuos Blogger.