Pubblicato il 09/07/13 - aggiornato il  | 36 commenti :

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 -


36 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
    2. Come facciamo a implementarle nel codice?

      Elimina
  9. 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
  13. Grazie mille!! È possibile aggiungere anche l'icona whatsapp?

    RispondiElimina
  14. @Maria Di Biase
    Vorresti aggiungere nuove icone a quelle già presenti? È un lavoro di grafica. Forse può aiutarti questo post in cui si aggiungono nuove icone
    http://www.ideepercomputeredinternet.com/2016/11/css-sprite-blogger-icone.html
    @#

    RispondiElimina
  15. Ho visto che un ragazzo ha aggiunto anche l'icona per instagram, volevo aggiungere quella alle icone che avevi già proposto tu (perché mi servirebbe).

    RispondiElimina
  16. Non è un lavoro semplicissimo. Devi scaricare questa immagine
    https://lh5.googleusercontent.com/-HN5wKOL-Rb8/UdvLwbAEkKI/AAAAAAAAikg/nhhrv8d6xrY/s924/icone-sociali.png
    aprirla con Photoshop o Gimp e aggiungerci le due icone di Instagram di cui una quando ci si passa sopra con il mouse. L'immagine risultante la devi caricare su Google Foto e ottenerne il link diretto per poi sostituirlo nel codice. Infine devi aggiungerci il blocco di codice per Instagram con la stessa sintassi seguendo il post che ti ho indicato nell'altro commento
    @#

    RispondiElimina
  17. Ciao, puoi cambiare il pulsante di twitter con il nuovo pulsante "X"

    RispondiElimina
    Risposte
    1. Non mi occupo più di Blogger da tempo. Comunque non è cosa difficile. Scarica questa immagine
      https://lh5.googleusercontent.com/-HN5wKOL-Rb8/UdvLwbAEkKI/AAAAAAAAikg/nhhrv8d6xrY/s924/icone-sociali.png
      quindi aprila su Gimp o su Photoshop e sostituisci le tre icone di Twitter con altrettante icone di X quindi salvi l'immagine e la inserisci in una bozza di Blogger. Vai su Modalità HTML e copi l'indirizzo che poi basterà sostituirlo a quello della immagine precedente nel codice di questo articolo.

      @#

      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