Come installare icone sociali che si colorano al passaggio del mouse.

Come inserire in Blogger il widget delle icone sociali di Facebook, Twitter, Google+, Youtube e RSS che si colorano al passaggio del cursore.

In molti blog sono presenti delle icone che rimandano agli account dell'autore sui vari social con effetti più o meno carini. Ricordo di aver presentato le icone animate e i bottoni in 3D ma potrei portare altri esempi. Un effetto che va particolarmente di moda è quello che mostra icone o immagini colorate al passaggio del cursore mentre in condizioni normali rimangono di un grigio poco appariscente.

Questo tipo di effetto l'ho già trattato nel post su come colorare le foto al passaggio del cursore, vediamo come si possa fare una cosa simile con le icone che rimandano agli account dei principali social network. Si tratta in sostanza di utilizzare una sola immagine di sfondo formata da tutte le icone una accanto all'altra e quindi di mostrare solo la porzione riguardo a quel dato social che può essere in bianco e nero o a colori. I social network prescelti sono Facebook, Twitter, Google Plus, Youtube insieme alla icona per la sottoscrizione dei feed. L'effetto è il seguente

e come mio solito ho postato in rete anche una sua dimostrazione

Per l'installazione, dopo aver salvato il template, si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga

   <div class='post-footer'>

e subito sopra si incolla il seguente codice

<!-- Icone Sociali che si colorano con Effetto Hover Inizio --> <style type='text/css'>
.socialicon {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialicon  span {
float: left;
display: inline;
margin-right: 8px;
}
.socialicon  span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSZH6RChi_VZ32Y2HdywLGQ3PvY6LrqAd2tu15qs-sZ7jl1j8Xr3idHpnE6zCf5qP8cVJuo5TZ6HFRVdnmnVn8Z1QrmjXUIZ33EeMW0_HWQtBJKILgLnEmJOlQbiIqpktPMiPKfeUiSQ-t/s164/icone-sociali.png&quot;) 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class='socialicon'>
<span><a href='http://twitter.com/parsifal32' id='iconTwitter' target='_blank' title='Seguimi su Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/ideepercomputeredinternet' id='iconFacebook' target='_blank' title='Seguici su Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' id='iconRSS' target='_blank' title='Sottoscrivi i Feed RSS'>RSS</a></span>
<span><a href='http://www.youtube.com/parsifal32' id='iconYouTube' target='_blank' title='Iscriviti al Canale su Youtube'>YouTube</a></span>
<span><a href='https://plus.google.com/111056841635962157738' id='iconGooglePlus' target='_blank' title='Seguimi su Google+'>Google</a></span></div>
<!-- Icone Sociali che si colorano con Effetto Hover Fine -->

Si salva il modello. Le icone si visualizzeranno in tutte le pagine del blog compresa la homepage, le pagine delle etichette e quelle di archivio. Se si vogliono visualizzare solo nei post vanno inserite all'inizio del codice precedente questa riga

<b:if cond='data:blog.pageType == &quot;item&quot;'>

mentre alla fine va chiuso il tag condizionale con quest'altra riga

</b:if>

Se si vuole posizionare il widget all'inizio dell'articolo, tutto il codice va inserito prima della riga

<data:post.body/>

I più bravi possono anche aggiungere altre icone modificando il CSS e integrando questa immagine. Le pagine dei social network si apriranno in un'altra scheda vista la presenza del tag target="_blank".