Icone ruotanti con collegamenti ai social network.

Widget di icone che ruotano al passaggio del mouse con collegamenti ai vari social network.

Continuo la presentazione di widget che mostrano icone con link ai social network più importanti che abbiano però una loro caratteristica particolare. Dopo aver illustrato come installare le icone in tre dimensioni è adesso la volta delle icone ruotanti. Le immagini le ho prese da Elegant Themes e possono ovviamente essere sostituite da altre che incontrino maggiormente i vostri gusti.

Per la loro installazione non occorre modificare il template visto che vanno posizionate in un elemento pagina nella sidebar o nel footer. Anche i social network che ho proposto possono essere modificati escludendo i codici di quelli che non ci interessano e magari sostituendoli con altri. Ho anche inserito le icone per la sottoscrizione dei feed e per la iscrizione alla Newsletter di Feedburner.

Quando si passa con il mouse sopra a una delle icone ci sono due effetti quello della trasparenza e quello della rotazione che si interrompono quando il cursore non punta più nessuna icona

Si va su Layout > Aggiungi un gadget e si scorre verticalmente fino a trovare HTML/Javascript. Si può inserire opzionalmente un titolo e in Sezioni del sito si incolla questo codice

<style type="text/css">
#social a:hover {background-color: transparent;opacity:0.7;
}
#social 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;
}
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);
}
</style>
<div align="center"><div id="social">
<a title="Segui i nostri feed" href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGkK6Z425YUH0EdErEz1wlEHhGFlA1f9gySv9IkFRifA1i8sG57YxaXmtl8am7mtpkEsS5Tg7rXSxrUe4OEkQC6PUnphNXxo9NJpYYpdJpk7UfCMS0QA20ZpIl2oYXJ3cQhk9PfdXMpE/s32/rss.png" style="margin-right:1px;" alt="Icona RSS"/></a>
<a rel="nofollow" title="Iscriviti alla Newsletter" href=http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAAb_zGI6NrjsrvSilzouHXIf3OIjm4P2mV9FDjOPs3Swvsr2nw7bEvJU7U3W2_EXBMe4Sljw3B4xgVL88bYD-_0gG4N_KOeVacvE0vr1TexELuLX-MtSWDQf0q_AOrb7l6-5kXAWrk4k/s32/email.png" style="margin-right:1px;" alt="Icona-Email"/></a>
<a rel="nofollow" title="Segui la Pagina Fan" href="https://www.facebook.com/ideepercomputeredinternet" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpg3qzLj-Fw3bJuNYdwQYrl435wWB3OjL8C2X0qZmYdl4135nBzZNYbQ76Y47I_HwSrce4chbhBzU1-7vP7KiR-i9yopwNfismbzlT9rKEvaYFYoNuSmPH3j8l0qMXXVhYEgyN4lyx8Zw/s32/facebook.png" style="margin-right:1px;" alt="Icona-facebook"/></a>
<a rel="nofollow" title="Seguici su Twitter" href="https://twitter.com/ipcei" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEorqW5UCEpO8jt8aM_BCT-cC-DVYHiS0rVzAKNE2Ims6mmWo50grsAGi5z3waHE5F2bjlqXBXiCuQCPNmUhaeZbZZ6eAC8QjOHcY26yDoPJ-4Jc9d9xdlBFSP3iG4SA-Pnmyjdti8Xng/s32/twitter.png" style="margin-right:1px;" alt="Icona-twitter"/></a> 
<a title="Aggiungimi su Google+" rel="nofollow" href="https://plus.google.com/111056841635962157738" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh7to7IpDKZ319uRrDbYKkC4oJ6On3cjvYvX9Vbd7hnoTtQ1wzkwa9fh4YMzpDE92Ocy9fZI7W2KbYQ837OZG-MiO4XWh85KKPbRMsjiSmob0bNAtkK3KnrdTdioj8Kq3lEfAQ8rbdqwk/s32/googleplus.png" alt="Icona-google+"/></a> 
<a title="Segui i miei Pin" rel="nofollow" href="http://pinterest.com/parsifal32/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgacYoGAgX8ERxZlaxSM3YelFM0Sx_YSt9clLk5qvt796_C9taLf0BQQbnBAn1LEQ4BRCSaHZc054pOMu4eEROmfuJQjboFb4jZ_aD5gkI71Fixm0hE32Qr2sCZ1XFQdPxOBvraxKnLQ/s32/pinterest.png" alt="Follow Me on Pinterest" /></a>
<a title="Seguimi su Youtube" rel="nofollow" href="http://www.youtube.com/user/parsifal32" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN9l9GRTLa-CXvPpLopW8HxOfFFTZFy82NERWRUsWyCcOKgasoL0YClw8PgqQ2JyvPQxQ60x5LP_uvWoSDSdHGwEuMpR0p7prp2AnB4b-OS23z5vk9P8e564CbiXS0t2x7f8qly7SIp6o/s32/youtube.png"/></a>
<a title="Seguimi su Instagam" rel="nofollow" href="http://instagram.com/parsifal32" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9lgBbBOD8yiie8EtkHN3ShDZQlmxrNvRqRhFB9NMtFMid_n8zdGmpuQHXMNw0AF-K-1Egj6d9tXw8iQP7HKb9xonBLPuDupRmdqhCYFKrtm4mrUFqRAM048p6aNFrLUISeMjh293qzlk/s32/instagram.png"/></a>
<a title="Seguimi su Linkedin" rel="nofollow" href="http://www.linkedin.com/in/parsifal32" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjl1-shnO_Ezp9khQyKP_dzYXjH0MuEA7Az7cyQbnSYnrRJfuxMUuO_hwOxS2qU3GRzQnXRiSXCRciaVK1Q6QQxo2__Wht4EesQuAre8pdnEOscTXImZ5v0WdBw7ibTRjBC3QpRL4bseY/s32/linkedin.png"/></a>
<a title="Seguimi su Tumblr" rel="nofollow" href="http://ernesto-tirinnanzi.tumblr.com/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ax0V_kXo2m4tSbVOeuG70jQvduwBUcKEIIFGLjHF1qfNhRmw83waH318PzgNIubD3p7HvBP26AcDyBFI0DKh_57LEnkB-JVK20c6Hz5dljvOTZ8lc97DI-3FR54EhmtMWsCJl0NqEpE/s32/tumblr.png"/></a>
<a title="Seguimi su Flickr" rel="nofollow" href="http://www.flickr.com/photos/25868141@N08/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjeWHy5L7G5CARLhZlJLKde338DuztX1uLxG9-tLej3yHOKqHEgWZMx1bAgU0WA5Sjl16uVJ7dXsb8B9qK8Kcn5NOi3mDFzMJ2FP17gLvte1YVhdPq956W0wEKEZDTLCHwtsTUnM9O2U/s32/flickr.png"/></a>
</div></div>

Si può settare il grado di opacità (0.7 quello proposto) e la durata della rotazione (proposta di 0.8 secondi). Dovrete sostituire gli indirizzi dei miei account nei vari social network con quello dei vostri.