Pubblicato il 29/10/11e aggiornato il

Come allineare alla stessa distanza le icone dei social sopra il post, sotto l'header o in una sidebar.

Ho già affrontato il tema di come si possano allineare i bottoni dei vari social network usando il codice di una tabella. Se lo si vuole fare con delle semplici icone che abbiano la stessa dimensione, può essere più proficuo usare un diverso metodo che mi è stato prospettato in una email. Con questo sistema tra l'altro le immagini saranno esattamente equidistanti una dall'altra senza bisogno di inserire manualmente i pixel dei margini

icone allineate sotto header blogger

Nel caso di quattro icone, il codice da usare potrebbe per esempio essere il seguente

<div align="center">
<div style="float:left; width:25%"><a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img src="https://lh3.googleusercontent.com/-DIg_wgVrKdQ/TqvmT1rcmYI/AAAAAAAAU2s/9B1AWaL7wKw/s128/rss.png" border="0" /></a>
</div>
<div style="float:left; width:25%"><a href="https://www.facebook.com/ideepercomputeredinternet" target="_blank"><img src="https://lh3.googleusercontent.com/-a8f712AqirU/Tqvmkiw9DOI/AAAAAAAAU28/1jPpQBeLPn8/s128/facebook.png" border="0" /></a>
</div>
<div style="float:left; width:25%"><a href="https://plus.google.com/111056841635962157738/posts" target="_blank"><img src="https://lh5.googleusercontent.com/-ITL1k9XA0z0/TqvmOiNjqNI/AAAAAAAAU2k/nzAceOgs44s/s128/google_plus.png" border="0" /></a>
</div>
<div style="float:left; width:25%"><a href="http://twitter.com/parsifal32" target="_blank"><img src="https://lh6.googleusercontent.com/-v7cKgcSkUV0/TqvmZI0-_kI/AAAAAAAAU20/fzBwo8Tziw4/s128/twitter.png" border="0" /></a>
</div>
</div>

Visto che le icone sono quattro ho usato la percentuale del 25%, se fossero state cinque sarebbe stata quella del 20% mentre nel caso di sole tre icone avrei dovuto inserire il 33%. Gli URL in rosso rappresentano gli indirizzi dei link a cui puntano le icone e quelli in blu sono invece gli URL delle immagini caricate su Picasa o su un hosting analogo. Il tag target="_blank" è opzionale e serve per aprire la pagina linkata in un'altra scheda del browser.

Questo metodo può essere utilizzato in un qualsiasi elemento pagina del tipo HTML/Javascript o anche in un post o una pagina statica. Se si vuole fare le cose in modo ancora più rigoroso in ottica SEO, può anche essere inserito il tag ALT per ciascuna immagine. 





14 commenti :

  1. Le icone sono bellissime. :)

    RispondiElimina
  2. @LeNny
    Le ho trovate semplicemente digitando free icon su Google ;)

    RispondiElimina
  3. Le ho trovate... Stavo pensando di sostituirle alle mie. :P

    Ciao. :)

    RispondiElimina
  4. Scusa la niubbaggine.. questo codice lo posso usare anche per mettere le icone nella sidebar?
    in tal caso, dove lo devo copiare nel template? :(

    RispondiElimina
  5. @Elena e Manuele
    L'importante è che nella sidebar ci sia abbastanza spazio. Vai su Layout > Aggiungi un gadget > HTML/Javascript e incolli il codice configurando le percentuali a seconda del numero degli elementi che inserisci.

    RispondiElimina
  6. ce l'ho fatta!! semplicemente ho aperto un nuovo gadget HTML nella sidebar e ho copiato il codice modificato.. grandissimo sto blog!! :D
    ecco il risultato:
    http://porcellinogiramondo.blogspot.com/
    grazie mille :)

    RispondiElimina
  7. Complimenti! Mi hai risolto un grandissimo problema per le icone social nella mia sidebar (megamusic.it)

    RispondiElimina
  8. ... ma c'è un modo per renderle più piccole? Grazie

    RispondiElimina
    Risposte
    1. @# Basta scaricare le icone incollando il loro URL nel browser per poi ridimensionarle a piacere con un tool tio Gimp, Photoshop o Pixlr
      http://www.ideepercomputeredinternet.com/2011/01/pixlr-per-modificare-foto-e-immagini.html

      Elimina
  9. Grazie mille Ernesto per i tuoi post, sono davvero molto utili!
    Sto costruendo il mio blog personale ma ho qualche problema proprio con l'allineamento dei bottoni social!
    Ho provato a usare sia il codice che hai dato qui sopra (indicando" 33%" perchè uso 3 icone) sia quello che hai indicato nel tuo post del 13ottobre2012 ma non riesco in alcun modo ad allinearle al centro, rimangono spostate a sinistra!
    La cosa strana è che sopra e sotto il "widget HTML delle icone social" ho inserito widget IMMAGINI (che ho trasformato in tasti linkati a delle pagine) della stessa larghezza della sidebar (270px) e quelli risultano tutti perfettamente centrati! E' come se il "widget HTML delle icone social" "leggesse" una larghezza differente della sidebar, come se fosse più larga o ci fosse un qualche ostacolo nella parte più a destra della stessa. Infatti se, attraverso il codice html inserito nel widget, aumento la distanza tra le icone social, ad un certo punto quella più a destra mi scompare o va "a capo" anche se c'è molto spazio "vuoto" prima del bordo della sidebar...
    Quale potrebbe essere il problema?
    Grazie per l'aiuto!
    Elena

    RispondiElimina
    Risposte
    1. Forse è proprio perché ci sono due widget con un codice simile. Prova a togliere la prima e l'ultima riga e a aggiungere
      display:block;
      dopo style=" e prima di float:left;
      in tutti e due i widget
      @#

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

    RispondiElimina
  11. Ciao a tutti! Nel mio blog ci sono le pagine e le icone social alla sinistra del blog, c'è un modo per metterle perfettamente al centro sotto il titolo e l'immagine? grazie!

    RispondiElimina
    Risposte
    1. Non so quale sia il tuo blog e se le icone erano nel modello scaricato da internet oppure se le haqi inserite tramite widget. Nel primo caso si può fare poco mentre nel secondo caso puoi centrare aggiungendo due righe di codice
      http://www.ideepercomputeredinternet.com/2009/09/come-centrare-un-testo-unimmagine-o-un.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.