Pubblicato il 20/12/11e aggiornato il

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.
bottoni-sociali-facebook-twitter.google-plus
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
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://lh3.googleusercontent.com/-lwJS_f4bV8o/TvCXhXVZ8tI/AAAAAAAAV2M/s9NQ4OmtHGQ/s48/googleplus.png" /> <span>Aggiungimi alle Cerchie</span></a></li>
<li><a href="http://www.facebook.com/ideepercomputeredinternet"><img src="https://lh3.googleusercontent.com/-zcCUNuKt72w/TvCXct-gUcI/AAAAAAAAV2E/fNLQx466t5Q/s48/facebook-logo.png" /> <span>Diventa Fan su Facebook</span></a></li>
<li><a href="http://twitter.com/parsifal32"><img src="https://lh6.googleusercontent.com/-RaePcEEwDoQ/TvCXmEmBGvI/AAAAAAAAV2U/GJw76XgyPew/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>




15 commenti :

  1. molto ma molto interessanti i tuoi articoli l'unica cosa è che sono imbranatina nel mettere questi gadget....altrimenti li vorrei tutti!!!!

    RispondiElimina
  2. @Facileconpam
    Ma no, vedrai che quando avrai più pratica ti sembrerà una cosa facilissima ^^

    RispondiElimina
  3. ciao come posso fare per inserire uno script nei postin modo che cliccando sopra l' immagine mi mostra i link inseriti
    esempio: http://4.bp.blogspot.com/-HCVzZDCUTFM/Tvi5IRmihPI/AAAAAAAABQg/9wkCFiYYm9Y/s1600/Cattura.PNG

    RispondiElimina
  4. ciao come posso fare per inserire uno script nei postin modo che cliccando sopra l' immagine mi mostra i link inseriti
    esempio:
    https://lh4.googleusercontent.com/-HCVzZDCUTFM/Tvi5IRmihPI/AAAAAAAABQg/9wkCFiYYm9Y/s644/Cattura.PNG

    RispondiElimina
  5. @boston blog
    Confesso di non aver ben compreso quello che intendi

    RispondiElimina
  6. vorrei creare un div con immagine da inserire nei post che faccia mostra\nascondi i link scusa non so come spiegartelo

    RispondiElimina
  7. cioè l immagine è così
    https://picasaweb.google.com/110578224459621866451/2011122614#5690497784778341330
    cliccando sopra dovrebbe diventare così
    https://lh4.googleusercontent.com/-HCVzZDCUTFM/Tvi5IRmihPI/AAAAAAAABQg/9wkCFiYYm9Y/s644/Cattura.PNG
    mosrtando i link al suo interno

    RispondiElimina
  8. la prima immagine è questa
    https://lh6.googleusercontent.com/-MhVcVMpvcyY/Tvi1lfDcO9I/AAAAAAAABQU/KWCBlGKHRhw/s213/download.png

    RispondiElimina
  9. @boston blog
    Ho capito. Puoi utilizzare lo script di questo post
    http://www.ideepercomputeredinternet.com/2011/02/come-espandere-o-nascondere-testo.html
    adattandolo alle tue esigenze

    RispondiElimina
  10. Ciao Ernesto.
    Per aggiungere altre icone o sostituire queste, che dimensioni devono avere all'incirca? Grazie mille.

    Buona serata
    Lucia Alocchi

    RispondiElimina
    Risposte
    1. @LuciaAlocchi
      Sono icone quadrate da 48x48 pixel in formato PNG

      Elimina
  11. ciao e grazie,per merito vostro il mio blog sta diventando sempre più carino.
    non riesco a trovare lo script come quello che avete voi per condividere su facebook twitter e via dicendo (sotto la ricerca personalizzata per intenderci).
    Grazie mille e complimenti.

    RispondiElimina
    Risposte
    1. Leggi e segui queste istruzioni
      http://www.ideepercomputeredinternet.com/2012/11/blogger-bottoni-facebook-googleplus-twitter-contatore.html
      @#

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

      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.