Pubblicato il 09/07/13e aggiornato il

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.

icone-sociali
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://lh5.googleusercontent.com/-HN5wKOL-Rb8/UdvLwbAEkKI/AAAAAAAAikg/nhhrv8d6xrY/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://lh5.googleusercontent.com/-HN5wKOL-Rb8/UdvLwbAEkKI/AAAAAAAAikg/nhhrv8d6xrY/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 -




29 commenti :

  1. Fantastico! Finalmente ho capito cos'è quel CSS Sprite che Page Speed mi mette sempre fra i suggerimenti. :)

    RispondiElimina
  2. Bellissimo ! C'è modo di allinearli al centro della sidebar ?

    RispondiElimina
    Risposte
    1. Si può scegliere la sinistra invece della destra (leggi l'aggiornamento). Per centrarle è più complicato @#

      Elimina
  3. ciao Eenesto,come posso creare una galleria di foto da inserire in una pagina di blogger?
    poi volevo anche sapere cortesemente come eliminare lo slideshow di default di blogger che va in azione quando si clicca una foto inserita in una pagina.Non so se sono stato chiaro,ti ringrazio comunque anticipatamente.

    RispondiElimina
    Risposte
    1. @# Per creare una galleria di foto da mettere in una pagina statica puoi usare questo post
      http://www.ideepercomputeredinternet.com/2012/12/galleria-foto-blogger.html

      Invece per disabilitare il Lightbox nativo di Blogger basta andare in Bacheca
      http://www.ideepercomputeredinternet.com/2011/10/torna-il-lightbox-nativo-su-blogger-ma.html

      Si può disabilitare anche selettivamente
      http://www.ideepercomputeredinternet.com/2012/12/lightbox-blogger.html

      Elimina
  4. Grazie, bellissimo! Ottimi spunti e soluzioni sempre semplici ( per me...) e utili).ciao

    RispondiElimina
  5. Credevo che solo su Wordpress si potessero vedere certe cose, per fortuna mi sbagliavo.

    RispondiElimina
  6. Ho modificato un po' il file grafico ed messo le icone, ma sono distanziate... le vorrei attaccate... saresti così gentile da dirmi cosa sbaglio?
    il blog è www. mangiodasola . com

    RispondiElimina
    Risposte
    1. Io purtoppo non sono un grafico. Hai provato a modificare questa immagine?
      https://lh5.googleusercontent.com/-HN5wKOL-Rb8/UdvLwbAEkKI/AAAAAAAAikg/nhhrv8d6xrY/s924/icone-sociali.png
      Se è così evidentemente non hai fatto un lavoro preciso al pixel :(
      @#

      Elimina
    2. Potrebbe anche essere che nel tuo blog ci siano delle impostazioni che introducono un padding automatico. Prova a sostituire la tua immagine con quella originale per verificare
      @#

      Elimina
    3. L'immagine l'ho creata correttamente, ma in effetti c'e' un problema con il template che introduce il padding automatico... con altri blog funziona bene. Devo trovare il modo di toglierlo, ma non sono ancora riuscito a capire dove è il problema.
      Se posso darti un suggerimento credo sia meglio inserire l'immagine direttamente alla giusta altezza e senza la terza riga, altrimenti con i browser più vecchi ci sono problemi poichè non trattano bene il parametro background-size. Se ti interessa contattami che ti posso fornire i file già ridimensionati.

      Elimina
  7. Ecco i file con le icone a 32 e 64 pixel, ho aggiunto anche l'icona feedly e instagram
    http: // s16.postimg.org/9efonp3rp/icon_social_smart32.png
    http: // s16.postimg.org/v24my545x/icon_social_smart64.png

    RispondiElimina
  8. Grazie di aver condiviso il tuo lavoro anche a nome dei lettori del sito che potranno usare anche le tue icone. Incollo gli URL senza spazi per maggiore semplicità
    http://s16.postimg.org/9efonp3rp/icon_social_smart32.png
    http://s16.postimg.org/v24my545x/icon_social_smart64.png
    @#

    RispondiElimina
    Risposte
    1. Ovviamente, meglio scaricarle e copiarle nel proprio spazio blog. Non so quanto sia affidabile postimage...

      Elimina
  9. esiste anche l'icona di instagram?

    RispondiElimina
    Risposte
    1. Le icone disponibili sono queste
      https://lh5.googleusercontent.com/-HN5wKOL-Rb8/UdvLwbAEkKI/AAAAAAAAikg/nhhrv8d6xrY/s924/icone-sociali.png
      Se sei brava in grafica pupoi provare a aggiungercela da sola e a integrare il codice con nuove righe mantenendo la stessa sintassi
      @#

      Elimina
  10. Ciao Ernesto, grazie per questo post! Ho modificato l'immagine e ne ho creata una personale che si trova qui https://lh6.googleusercontent.com/-hJ2MMvncpIQ/VMaumc2GIsI/AAAAAAAAKN8/u82USKhNXpc/w602-h252-no/icone_sociali.png ma copiando tutto per filo e per segno l'icona di fb resta sottostante rispetto a tutte le altre. Come posso sistemare la cosa? Grazie mille

    RispondiElimina
    Risposte
    1. Quando una icona non è in linea con le altre dipende dal fatto che manca lo spazio sufficiente. Prova a mettere sulla sinistra (leggi l'aggiornamento). Nel tuo blog però non le vedo
      @#

      Elimina
    2. sono in uno di prova. Lo spazio c'è. l'ho reso visibile affinchè tu lo veda. Grazie mille http://ricettedasolleticonelcuore.blogspot.com/

      Elimina
    3. volevo metterle provare a metterle inizialmente sopra la barra del menù ma l'effetto è quello che si vede ed inoltre si crea uno spazio troppo ampio tra il menù e le icone anche se utilizzo semplici social icon

      Elimina
    4. Il blog è aperto solo agli invitati. Ti prego di non farmi perdere tempo specie in questo periodo che ce ne hoveramente poco. Prova come ti ho detto a metterle a sinistra
      @#

      Elimina
    5. la barra laterale, superiore ed inferiore sono di gran lunga maggiori e non funziona ma va bene lo stesso.
      scusa per il tempo che ti ho fatto perdere, leggendo non credo sia stato superiore a quello dedicato ad altri, si è trattato di aprire una finestra... lo terrò bene a mente e non mi permetterò più di farti perdere altro tempo in futuro...
      grazie

      Elimina
  11. Ciao, mi piacerebbe tanto che aggiungessi l'iconcina per il contatto email, ti prego! <3

    RispondiElimina
    Risposte
    1. Se riesci a realizzarla da solo e a incollarla nella immagine poi aggiungi due blocchi di codice con la stessa sintassi ed è fatta
      @#

      Elimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Ciao Ernesto ;)
      Scusami ma si possono nel caso metterle una sull'altra? Nel senso di creare un quadrato invece che in fila?
      Grazie anticipatamente e complimenti, ti leggo sempre con piacere.

      Elimina
    2. Dipende dalla larghezza della sidebar. Se è meno larga di 300 pixel le icone che non c'entrano vanno alla riga di sotto. Puoi settare il tutto modificando la riga
      ul.ipcei_icone_sociali {float:right;}
      in questo modo
      ul.ipcei_icone_sociali {float:left; width:160px;}
      dove puoi giocare con il parametro width:160px; per la larghezza di ciascuna riga
      @#

      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.