Come inserire delle icone circolari ruotanti nella sidebar.

Come installare in una sidebar di Blogger le icone dei social network che ruotano al passaggio del mouse

I collegamenti con i social network sono essenziali per tutti i siti in quanto consentono di creare delle sinergie fondamentali per aumentare il traffico. Oltre ai bottoni con contatore che permettono di condividere articoli nei vari social è utile inserire nel layout del blog le icone con i collegamenti ai nostri account. Ricordo tra l'altro di aver già presentato dei bottoni animati e dei pulsanti in tre dimensioni. Vado adesso a illustrare dei bottoni con collegamento a Facebook, Twitter, Google Plus e i Feed RSS che ruotano al passaggio del mouse. 

Tale comportamento si visualizzerà con i browser che supportano le trasformazioni CSS3 mentre con gli altri, segnatamente Internet Explorer, si vedrà l'icona statica. Ecco l'effetto che si vede con Chrome

Si possono scegliere icone diverse da quelle che ho preso per il test e volendo se ne possono mettere anche altre aggiungendo delle semplici righe. Si va su Layout > Aggiungi un gadget > HTML/Javascript, opzionalmente si digita il titolo del widget e, in Sezioni del sito, si incolla il seguente codice

<style type='text/css'>
#icone {
width:100%;
margin-left:-15px;
margin-bottom:10px;
display:block;
clear:both;
}
.icone_sociali{display:table}
.icone_sociali ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:center;
padding:5px 5px 0 0
}
.icone_sociali ul {
padding:0;
float:right;
margin-bottom:0;
}
.icone_sociali li.icona {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.icone_sociali li:hover {
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}
.icone_sociali a:hover {
border:none !important;
}
</style>
<div class='icone_sociali' id='icone'>
<ul>
<li class='icona'><a href='http://facebook.com/ideepercomputeredinternet' target="_blank"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUSq1NxK3s0cB7eCIlh_aZSx-IkrD9nIbvYJ-eqvYhG2fktKBJvLl6lt0_MW-b7m8AldP8aL2WX4JBAuOP5UtoV6Pb1hjEGNBOsfkpLcN7pNWrswEIXgDO2Qw0D67ZZaemMUPc0df_2Q/s48/facebook.png'/></a></li>
<li class='icona'><a href='http://twitter.com/parsifal32' target="_blank"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMotDpv6KVQdce5ZF24PSJ8kshz9qGKaI3GH1SBAdyIWbmlZ0FJWpN4AM0EzjUtecebzp5TJzVgu09Cuf45kP4ehUCRauE4YycEzrXED4APzoz5yevVtqopCXglQFa7kYqNul5uRPEHPU/s48/twitter.png'/></a></li>
<li class='icona'><a href='https://plus.google.com/111056841635962157738' target="_blank"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhveMLcR9ZSvMgk-Lwvi6STIVV0Xl6UGeOGxFouOd9JUZqTLwFEtk9aGvW4VUVO3Aljp2CDKuRBzjVs_3ckjCQr4GD2YoTRIqgkYh3mntYmU4ELgwUU9DK25gJbQP3v4x41oVEWR9Z6hgo/s48/google.png'/></a></li>
<li class='icona'><a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' target="_blank"><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJitAwCF1JgcZbFE194FBxBCcT2WcjYOQQ9o10MdZbr9gyhoQQRprRJtDhD8RKuTNcGh2IcMRzWmlhCPIUteIoKfTctPgeGtdxD0OJycK852p4HWNFmcUTNbwknDBFMIoult3pW-YHQM/s48/rss.png'/></a></li>
</ul></div>

Si salva l'elemento pagina e si posiziona con il trascinamento del mouse quindi si salva la disposizione.

La riga margin-left:-15px; serve per centrare le icone nella sidebar. Si modifica il valore numerico fino ad avere una posizione ottimale.  La riga margin-left:6px; determina la distanza in pixel tra le varie icone e può essere aumentata se si ha una sidebar molto larga. La durata della rotazione è di 0.4s cioè di quattro decimi di secondo, valore che può essere personalizzato in tutte le sue occorrenze. Gli URL in rosso rappresentano gli indirizzi delle immagini e i collegamenti ai social. Le icone possono anche essere lasciate invariate ma dovrete inserire gli URL dei vostri account.

Le icone possono essere ordinate in modo diverso e per aggiungerne altre basta inserire una nuova riga prima del tag </ul> che individua la fine dell'elenco. La riga di codice generica è la seguente

<li class='icona'><a href='URL DEL SOCIAL' target="_blank"><img border='0' src='URL DELLA IMMAGINE'/></a></li>

Il tag target="_blank" serve per aprire il link in un'altra scheda e può anche essere tralasciato.