Icone ruotanti di Facebook, Twitter, Google+ e Feed.

Come installare un widget con le icone sociali ruotanti di Facebook, Twitter, Google+ e Feed.

Le icone che ruotano al passaggio del mouse sono sempre molto richieste. La rotazione di una immagine è un effetto hover piuttosto semplice da realizzare. Ricordo di aver presentato il widget degli Ultimi Commenti con avatar ruotanti e quello dei Post più popolari sempre con miniature ruotanti.

Ho anche presentato il gadget delle icone circolari da visualizzare alla fine dell'articolo. In questo post illustrerò come installare un semplicissimo gadget che mostri le quattro icone più importanti nella sidebar con un effetto rotazione al passaggio del cursore. Le icone avranno il collegamento rispettivamente a Facebook, Twitter, Google+ e Feed RSS.    

Per l'installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript per poi incollare in Sezioni del sito il seguente codice

<style>
.rotating-icons img {
-webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotating-icons img:hover {
-webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>
<div align="center">
<div class="rotating-icons">
<a href="https://www.facebook.com/ideepercomputeredinternet" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMkEsjA3875T5RAu28WXi8r4WFoCLb5nOcG7zcyOxc0NR66_FzJvy3NegrxLdmDB2udoKXPdppM5NggEIxuvavY42Q4I3D6-HZUsvtc-IF2RI0qLGmT4S4xcJHcjwgS-jGCmID4m1tu4E/s80-Ic42/facebook.png" /></a>
<a href="https://twitter.com/parsifal32" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJrv4vY9KlwgB4kCgE19LcJugaGyrtTjx7rwyPJQQgXzCG9iisd2Hua7FxHjtLzk_O_cOmx0jWfZD7ZKYZwEwvXp970q9K2y0OL3Y-_IWEVbpfQ0p4GIUu9OjEOsB-9p9PlLinnd_LVA/s80-Ic42/twitter.png" /></a><br />
<a href="https://plus.google.com/u/0/+ErnestoTirinnanzi" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgs3_EDkq_KiVpmJM3_4NKCMo_YEAbG04eFpvjpJYO2JU6BfKOWnOfE3B1ykZBxGzR3Qu6T2f6yP3Ohu70bpzoHIy-skRZt-jiEVOcMjYyWqL464ORAs_T4o49QWNIcHObWd8pHT9boY8/s80-Ic42/googleplus.png" /></a>
<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xCckJDwEfhfoackzv9PSdvLv0NPTvhUnBW6ot7zH5BojO6RfgGPWSHkMbQuQzZ_cI4CH_1-ZmPv95V6B-tK83G8kPkp_dufpFEKDRHnuvgvmTdkD8IT_DAGkbpCCwMP-HCsRlkvRzwY/s80-Ic42/feed-rss.png" /></a>
</div>
</div>

Si salva e si posiziona con il drag & drop del mouse. Le personalizzazioni più importanti sono:

1. Gli URL colorati di rosso dei miei account vanno sostituiti con quelli vostri
2. Gli URL delle icone colorati di viola possono essere sostituiti da altri
3. La durata della rotazione è settata in 6 decimi di secondi.

Demo
Clicca qui