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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHAW2erjcjI5IFOy0MSzkaw484AYaj59v_DarTIQDobz9PcPSjum7mKkwhTOFTOJkdC9FRfaCsZG5zp9OtpQQyhhgg7QLdVcM7I7vZ3ENXTjaesTffrvuHDCtNoge_734R8fLKrCpW38/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPWMINVcXCJeLYhGJPpZeMQUrA1Mm-XPmxzRwcnhdoD6sID2dfFBDl97LVZoh_tYeVSTZmogCtkgHt2dANdT52118evC1VbtFF4ivXsdwRHsIIZ8rk9sixyd1LcZqcd0_DbrMjXrEzuIk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqgR7eoDFINvAucHVrenZvANNKPNSZjhep5UvEl4YkwmF_JXmrBmxLlxIM7rcGlTLUj3So6U3e-c3gqPyTZfAsLp7utb7dSpXAEKyyggs12prxIl8ptEq6HTiv3aEdAQMT0D1SqJ3wb5o/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxzmdHfPSMt2_JlB3ThzEozgGXQytn_433QxzZX1g9NLK5lVUnnZij2CxE5ddRXok4CovfNJeLUAJibdz-8i2jXC8Koq6r97Q9Lnj3myVI0fdt2RiSPVL0eLr2WSjfXlB6uIS8SrUeioc/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.

• Demo di icone allineate sotto l'header di un blog -

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.