Bottoni animati per Facebook, Google Plus, Twitter e altri social network.

Nei template con sidebar non troppo larghe potrebbe essere interessante mostrare i pulsanti per seguirci nei vari social network in posizione verticale con un testo che invita il lettore a aggiungerci alle sue Cerchie su Google Plus, a iscriversi alla nostra pagina fan di Facebook o a seguirci su Twitter. Ai tre social network principali possiamo aggiungercene anche altri più specifici per la nostra tipologia di blog.

L'animazione dei bottoni non sta altro che nell'aggiunta di un diverso stile nel momento in cui il mouse passa sopra ai singoli bottoni. Ci sarà cioè una diversa colorazione del testo e uno spostamento di 1 pixel a destra e in basso. Si può naturalmente scegliere anche la sinistra e il basso sostituendo nel codice top con bottom e left con right. Così come si può aumentare la quantità di spostamento a 2 pixel. Come del resto ho fatto in questa

• Demo dei bottoni sociali di Facebook, Twitter e Google Plus -  

Per l'installazione si va come al solito su Modello > Backup/ripristino per salvare il modello completo. Su Modello > Modifica HTML > Procedi si cerca la riga </head> e, subito sopra, si incolla questo codice 

<style>
/*------- BOTTONI SOCIALI ------*/
.bottonisociali li {
border:1px solid #7f7f7f !important; /* Colore del bordo */ padding:5px !important;
margin:0 5px 6px 5px;
background:#dddddd; /* Colore dello sfondo */ list-style:none;
}
.bottonisociali li a {
font-weight:bold; /* Grassetto testo */ text-decoration:none;
color:#191919 !important; /* Colore del testo */ }
.bottonisociali li a:hover {
color:#1fabff !important; /* Colore del testo al passaggio del mouse */ position:relative;
top:1px; left:1px; }
.bottonisociali span {
padding-left:10px;
}
.bottonisociali img {
vertical-align:middle;
border:0;
}
</style>

dove possono essere personalizzati i codici dei colori e lo spostamento per la posizione relativa al passaggio del mouse. Si salva il modello. Si va quindi su Layout > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito quest'altro codice

<div class="bottonisociali">
<ul>
<li><a href="http://plus.google.com/111056841635962157738"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq5p3oBW9cAc7zGjdBvt7r9RzkCr_toZCgov2qdWPRYBKtEuVAWYPG0zslONfTNiMOBqtQdV1ufz9A3aQJv2mqI_5j2B8Q9Pf0YVq9PvJlv6Ae1WCZfPGVtiDZzzEXdOljRGjX0jd68XUl/s48/googleplus.png" /> <span>Aggiungimi alle Cerchie</span></a></li>
<li><a href="http://www.facebook.com/ideepercomputeredinternet"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DMhch3y49kKLPPjVcZO2jkottW1egErRcE4-_Fda1rZRhQIeYzqgxyAv8LCts6TNU1nWrvAEOJU1NpMyHEtJZOV3mHYw1dThLreYmiWAp9pH_gfdechiJEFPNnhyPhWqaiS_lBpU6ZB2/s48/facebook-logo.png" /> <span>Diventa Fan su Facebook</span></a></li>
<li><a href="http://twitter.com/parsifal32"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDPHr1pzfU63AE1kSQzZtFQouiZLQ2-50ZQ-mgoSWE2yF0wsKHczP13t0w9GU-vM7PQVkN3a-JxZAurdEpE1jaeEI1eBta8aBnh7-InEjjLx-jj7GOnn9gNhNngmih9pGImhGRT-mGp1jy/s48/twitter-logo.png" /> <span>Seguimi su Twitter</span></a></li>
</ul>
</div>

che dovrà essere personalizzato inserendo gli URL del vostro Profilo su Google+, dell'indirizzo della pagina fan (o del Profilo) su Facebook e dell'URL del vostro account su Twitter. Si salva e si posiziona nella sidebar con il mouse. Le scritte in blu sono quelle che visualizzeremo nel widget accanto alle icone. A proposito di icone, se non vi piacciono quelle che ho proposto ne potete tranquillamente sostituire l'URL con quello di altre che incontrano il vostro gusto e che avrete precedentemente caricato su Picasa. Si possono aggiungere altri social incollando prima di </div> una o più righe con questa sintassi
<li><a href="Indirizzo del collegamento"><img src="Indirizzo dell'icona" /><span>Testo visualizzato</span></a></li>