Piccole icone sociali colorate e animate per Blogger.

Come installare delle icone con collegamento ai social network animate, colorate e con effetto hover attraverso un CSS sprite con una sola immagine di background.

Per aumentare la velocità di caricamento delle pagine è opportuno usare dei CSS Sprites per unire le immagini in una soltanto in modo da ridurre il numero di richieste HTTP al server. Si tratta in sostanza di allineare le immagini una accanto all'altra per poi richiamarle come background inserendo opportuni parametri in altezza e in larghezza. Un esempio di immagini di icone inserite con un CSS Sprite è quello relativo alle icone in 3 dimensioni che sono attualmente installate anche in questo sito.

Nei consigli che Google ci dà con il suo tool Page Speed Insights, quello di usare immagini sprite specialmente nel modello è ricorrente. Vediamo adesso altre icone con collegamento ai vari social network e con effetto hover che utilizzano una sola immagine di background.

Per l'installazione di queste icone non occorre neppure modificare il template. Si va infatti su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<ul class="ipcei_icone_sociali">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/parsifal32" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/111056841635962157738" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/parsifal32/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/parsifal32" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/photos/25868141@N08/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/user/parsifal32" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.ipcei_icone_sociali {float:right;}
ul.ipcei_icone_sociali li {float:left;list-style: none outside none;border:none;}
ul.ipcei_icone_sociali li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypXWLSKAFrsHFRKhUSiL5YX_W-f6m1hF0Iym3FR6jv8npjMRJY3OKWDUX4h5GfGejCi3RCGXfemI3RyNIicLfJjwINqVjq-xqBqmrS6myveJrA9W2UU8Yd_6Mma-ONHVXyAneyMnz/s924/icone-sociali.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.ipcei_icone_sociali li a, .ie8 ul.ipcei_icone_sociali li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypXWLSKAFrsHFRKhUSiL5YX_W-f6m1hF0Iym3FR6jv8npjMRJY3OKWDUX4h5GfGejCi3RCGXfemI3RyNIicLfJjwINqVjq-xqBqmrS6myveJrA9W2UU8Yd_6Mma-ONHVXyAneyMnz/s924/icone-sociali.png' )}
ul.ipcei_icone_sociali li.facebook a{ background-position:0 0}
ul.ipcei_icone_sociali li.flickr a{ background-position:-32px 0}
ul.ipcei_icone_sociali li.dribbble a{ background-position:-64px 0}
ul.ipcei_icone_sociali li.googleplus a{ background-position:-96px 0}
ul.ipcei_icone_sociali li.linkedin a{ background-position:-128px 0}
ul.ipcei_icone_sociali li.pinterest a{ background-position:-160px 0}
ul.ipcei_icone_sociali li.rss a{ background-position:-192px 0}
ul.ipcei_icone_sociali li.skype a{ background-position:-224px 0}
ul.ipcei_icone_sociali li.twitter a{ background-position:-256px 0}
ul.ipcei_icone_sociali li.vimeo a{ background-position:-288px 0}
ul.ipcei_icone_sociali li.youtube a{ background-position:-320px 0}
ul.ipcei_icone_sociali li.facebook a:hover, #sidebar ul.ipcei_icone_sociali li.facebook a:hover{ background-position:0 -32px}
ul.ipcei_icone_sociali li.flickr a:hover, #sidebar ul.ipcei_icone_sociali li.flickr a:hover{ background-position:-32px -32px}
ul.ipcei_icone_sociali li.googleplus a:hover, #sidebar ul.ipcei_icone_sociali li.googleplus a:hover{ background-position:-96px -32px}
ul.ipcei_icone_sociali li.linkedin a:hover, #sidebar ul.ipcei_icone_sociali li.linkedin a:hover{ background-position:-128px -32px}
ul.ipcei_icone_sociali li.pinterest a:hover, #sidebar ul.ipcei_icone_sociali li.pinterest a:hover{ background-position:-160px -32px}
ul.ipcei_icone_sociali li.rss a:hover, #sidebar ul.ipcei_icone_sociali li.rss a:hover{ background-position:-192px -32px}
ul.ipcei_icone_sociali li.skype a:hover, #sidebar ul.ipcei_icone_sociali li.skype a:hover{ background-position:-224px -32px}
ul.ipcei_icone_sociali li.twitter a:hover, #sidebar ul.ipcei_icone_sociali li.twitter a:hover{ background-position:-256px -32px}
ul.ipcei_icone_sociali li.vimeo a:hover, #sidebar ul.ipcei_icone_sociali li.vimeo a:hover{ background-position:-288px -32px}
ul.ipcei_icone_sociali li.youtube a:hover, #sidebar ul.ipcei_icone_sociali li.youtube a:hover{ background-position:-320px -32px}
</style>

Salvate e posizionate l'elemento pagina. Vanno sostituiti gli URL degli account dei vari social network che sono stati colorati di rosso.  Se non vi interessa inserire una o più icone non c'è nessun problema visto che possono essere eliminate le righe relative. Per esempio per non mostrare l'icona di Skype si eliminano dal  codice le righe seguenti

<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li> 
e, opzionalmente, anche le seguenti
ul.ipcei_icone_sociali li.skype a:hover, #sidebar ul.ipcei_icone_sociali li.skype a:hover{ background-position:-224px -32px}



Questo stesso codice può essere usato anche in un blog Wordpress andando su Aspetto > Widget > Testo. Si trascina l'elemento nella sidebar e si incolla il codice.
Aggiornamento: le icone sono posizionate sulla destra del layout. Se le volete posizionare sulla sinistra modificate la riga di codice in questo modo
ul.ipcei_icone_sociali {float:left;}
Per metterle centrali non ci sono tag, si può solo farlo per tentativi.
Fonte | Paul Crowe -