Pubblicato il 28/02/16 - aggiornato il  | 2 commenti :

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

widget-social-network

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

widget-social-network-icone

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.


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.


2 commenti :

  1. Buongiorno, io vorrei inserire i widget solamente di facebook instagram linkedin e twitter. Esiste un widget che contenga solo questi social?
    Grazie mille, Lorenza

    RispondiElimina
    Risposte
    1. Come questo no ma lo puoi creare da sola. Usi questo codice ma cambi gli indirizzi. Il problema maggiore è quello di modificare l'immagine, questa
      https://lh3.googleusercontent.com/-CzaWqlnAvpg/VtGscV_DHdI/AAAAAAAA0Yg/--fMPtxUKfg/s454-Ic42/social-icons.png
      Puoi leggerti questo post per capire come si fa
      http://www.ideepercomputeredinternet.com/2016/11/css-sprite-blogger-icone.html

      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy