Come inserire bottoni animati con i link ai social network.

Dopo il cambio di template che ho fatto circa due settimane fa mi è stato chiesto come avevo fatto a inserire tutta una serie di icone con i collegamenti ai vari social network che hanno la particolarità di spostarsi leggermente quando vengono puntate dal mouse.

Si tratta in effetti di uno spostamento di un solo pixel in basso e a destra. La prima cosa da fare è procurarci i link delle pagine che vogliamo linkare mentre la seconda operazione consisterà nel trovare delle icone che soddisfino il nostro gusto estetico. Ricordo che ci sono set di icone gratuite per tutti i gusti. Basta fare delle ricerche su internet oppure andare su siti specializzati quali IconFinder o Iconza. In questo ultimo sito le icone possono essere personalizzate con una vasta gamma di colori. E' ovvio che dovranno essere scelte tutte della stessa dimensione.

Per inserirle nel blog bisogna andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare un codice come il seguente inserendo gli URL dei collegamenti e gli indirizzi delle icone presi da Picasa dove dovranno essere preventivamente caricate

<style> 

.bottonisociali a:hover { position:relative; top:1px; left:1px; } 

</style> 

<div class="bottonisociali"> 

<table cellspacing="0" cellpadding="0"> 

<tr>    

    <td style="padding-top: 0px;">     

<a href="URL_FEEDBURNER" target="_blank"/><img src="IMMAGINE_FEEDBURNER" alt="RSS" title="Iscriviti ai feed"/></a> 

    </td> 

    <td style="padding-left: 5px;"> 

<a href="http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN" target="_blank"/><img src="URL_ISCRIZIONE-_EMAIL" alt="newsletter" title="Iscriviti alla 

newsletter"/></a> 

    </td> 

    <td style="padding-left: 5px;"> 

<a href="URL_PPAGINA_FAN" target="_blank"/><img src="ICONA_FACEBOOK" alt="facebook" title="Pagina Fan"/></a> 

    </td> 

    <td style="padding-left: 5px;"> 

<a rel="author" rel="me"  href="INDIRIZZO_PAGINA_BUSINESS_GOOGLE_PLUS" target="_blank"/><img src="ICONA_GOOGLE_PLUS" alt="googleplus-pagina" title="Pagina Google Plus"/></a>     

    </td> 

<td style="padding-left: 5px;"> 

<a href="INDIRIZZO_ACCOUNT_TWITTER" target="_blank"/><img src="ICONA_TWITTER" alt="twitter" title="Twitter"/></a> 

    </td> 

<td style="padding-left: 5px;"> 

<a href="URL_PROFILO_FACEBOOK" target="_blank"/><img src="ICONA_FACEBOOK" alt="facebook-profilo" title="Profilo Facebook"/></a> 

    </td> 

<td style="padding-left: 5px;"> 

<a href="URL_PROFILO_GOOGLE_PLUS" target="_blank"/><img src="ICONA_GOOGLE_PLUS" alt="googleplus-profilo" title="Profilo Google Plus"/></a> 

    </td> 

<td style="padding-left: 5px;"> 

<a href="URL_CANALE_YOUTUBE" target="_blank"/><img src="ICONA_YOUTUBE" alt="canale-youtube" title="Canale su Youtube"/></a>     </td> 

  </tr> 

</table></div>

Dovrà inoltre essere sostituito l'ID di questo blog su FeedBurner con quello del vostro in modo che si apra la pagina di sottoscrizione alla Newsletter. Tale dato può essere trovato accedendo al vostro account su Feedburner. Le espressioni in Title sono quelle che si visualizzeranno in un tooltip quando si passerà sopra alle icone con il cursore. Lo spostamento a destra e in basso di un pixel può essere modificato cambiando i parametri su  top:1px; left:1px;

Naturalmente si possono inserire altre icone con altri collegamenti o togliere quelle che non ci interessano. Possiamo anche posizionarle su due righe se non entrano nella sidebar. E' sufficiente inserire questo codice

</tr><tr>

esattamente dove si vuole che inizi la seconda riga delle icone e modificare la riga successiva inserendo la distanza dal margine superiore al posto di quella al margine sinistro cioè padding-top:0px; al posto di padding-left:5px; Concludo osservando che i numeri 0px e 5px sono puramente indicativi e possono essere modificati.