Widget animato di icone collegate ai social network.

Come installare un gadget che mostri le icone animate al passaggio del cursore con collegamento ai Feed, Facebook, Twitter e Google Plus.

Quando si installa un widget in un sito che contiene delle immagini collegate a social network o ad altre risorse bisognerebbe sempre preferire quelli che utilizzano i CSS Sprite perché con questo sistema si riducono a una soltanto le chiamate HTTP con un grande beneficio sulla velocità di caricamento che come è noto da tempo è diventato uno dei fattori di ranking di Google.

Quello che vado a presentare è un widget di questo tipo anche se molto semplice. Utilizza una sola immagine che ne contiene ben otto. Una per ciascun social network di colore grigio che viene visualizzata in condizioni normali e altre quattro colorate per gli stessi social network che si visualizzano al passaggi del cursore sopra di esse. Nello screenshot successivo il mouse è sopra alla icona di Facebook

Il passaggio da una icona a un'altra avviene nel tempo di due decimi di secondi con le regole di trasformazione del CSS3. Ecco una GIF animata che mostra come funziona il gadget

L'installazione è semplicissima. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla il codice seguente in Sezioni del sito

<style> 
.social-icons a {
display:block;
height:50px;
width:50px;
padding:0 8px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Qef06qIQFQd4EE89hyphenhyphenFHxK_vpAScDwtbo45-wqKsOtQmZyPwgHqpxmkdXcXExL9K1utd0uFG2ZIog9GtgeQacL4lkSkn6OO5WajYptRj9hpbApjNsLNYg-LmEK35N5sjIWhuXbHN_2k/s454-Ic42/social-icons.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.social-icons a.googleplus-icon {
background-position: 0px -58px;
}
.social-icons a.googleplus-icon:hover { 
background-position: 0px 0px;
}
.social-icons a.twitter-icon { 
background-position: 0px -290px;
}
.social-icons a.twitter-icon:hover {
background-position: 0px -232px;
}
.social-icons a.facebook-icon {
background-position: 0px -406px;
}
.social-icons a.facebook-icon:hover {
background-position: 0px -348px;
}
.social-icons a.rss-icon { 
background-position: 0px -174px;
}
.social-icons a.rss-icon:hover {
background-position: 0px -116px;
}
</style>
<div class='social-icons'>
<a class='rss-icon' href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" rel='nofollow' target='_blank'></a>
<a class='googleplus-icon' href="https://plus.google.com/+ErnestoTirinnanzi" rel='nofollow' target='_blank'></a>
<a class='facebook-icon' href="https://www.facebook.com/ideepercomputeredinternet" rel='nofollow' target='_blank'></a>
<a class='twitter-icon' href="https://twitter.com/parsifal32" rel='nofollow' target='_blank' ></a>
</div>

Dopo averlo salvato, il widget si può posizionare a piacere nella sidebar. Le personalizzazioni che riguardano la dimensione delle icone possono anche essere applicate però bisogna considerare che si tratta in un CSS Sprite e che ciascuna icona viene inserita nel widget come background con le sue coordinate nella immagine Sprite il cui URL è colorato di viola. Vanno certamente modificati gli URL colorati di blu dei collegamenti agli account dei vari social network.

Demo
Clicca qui

Il tag target='_blank' è opzionale ed è stato inserito per aprire il link in un'altra scheda del browser mentre il tag rel='nofollow' serve per non esportare Page Rank ai siti siti che si sono linkati. Concludo osservando che non sono presenti dei tag di Blogger il codice può essere utilizzato in qualsiasi pagina HTML anche su Wordpress incollandolo su Aspetto > Widget > Testo.