Pubblicato il 23/12/12e aggiornato il

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

icone-sociali
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://lh6.googleusercontent.com/-Kkz2SF4Om6g/UNbUPVlC1oI/AAAAAAAAd9c/GszqkTdRFP8/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".




3 commenti :

  1. Ciao Ernesto ti faccio i miei migliori auguri di un Buon Natale e...

    …………(¯`O´¯)
    …………*./ | \ .*
    …………..*♫*.
    ………, • '*♥* ' • ,
    ……. '*• ♫♫♫•*'
    ….. ' *, • '♫ ' • ,* '
    ….' * • ♫*♥*♫• * '
    … * , • Feliz' • , * '
    …* ' •♫♫*♥*♫♫ • ' * '
    ' ' • . Navidad . • ' ' '
    ' ' • ♫♫♫*♥*♫♫♫• * ' '
    …………..x♥x
    …………….♥

    ⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★
    ░░░░░░█░█ █▀█ █▀█ █▀█ █░█░░░░░
    ░░░░░░█▀█ █▀█ █▀▀ █▀▀ ▀█▀░░░░░
    ░░░░░░▀░▀ ▀░▀ ▀░░ ▀░░ ░▀░░░░░░
    █▄░█ █▀▀ █░█░█░░█░█ █▀▀ █▀█ █▀█
    █░██ █▀▀ █░█░█░░▀█▀ █▀▀ █▀█ ██▀
    ▀░░▀ ▀▀▀ ░▀▀▀░░░░▀░ ▀▀▀ ▀░▀ ▀░▀
    ⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★⋰⋱★

    RispondiElimina
  2. e si vogliono mettere nella barra laterale?

    RispondiElimina
    Risposte
    1. @ Antonella
      Queste non si possono inserire in una sidebar, bisognerebbe modificare qualcosa. Però ci sono molte icone che puoi usare per la sidebar. Ho pubblicato un post anche oggi in tal senso
      http://www.ideepercomputeredinternet.com/2013/02/icone-sociali-ruotanti.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. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.