Pubblicato il 16/10/13 - aggiornato il  | 13 commenti :

Widget di pulsanti scorrevoli per Social Network.

Pulsanti scorrevoli al passaggio del mouse per i link a Twitter, Google Plus, Facebook, Pinterest e RSS Feed.
Dopo il grande successo avuto dalle piccole icone animate alla fine dei post riprendo a presentare widget di condivisione sui social network. Si tratta di pulsanti che portano il lettore direttamente nell'account dell'autore del post su Facebook, Twitter, Google+, Pinterest e nella pagina dell'URL dei Feed RSS. Se siete sufficientemente bravi con la grafica potrete certamente creare altre immagini simili a quelle proposte per aggiungere altri social. Dovranno essere aggiunti altri elementi <li> alla fine del codice e le classi di stile relative seguendo la stessa sintassi.

È inoltre possibile eliminare la riga del social che non ci dovesse interessare. Per la installazione di questi bottoni non occorre modificare il modello ma basta andare su Layout e aggiungere un nuovo elemento pagina HTML/Javascript. Il widget sarà visibile in alto a sinistra e ciascun pulsante si mostrerà al passaggio del mouse. Viene utilizzata la Libreria JQuery. Ecco l'aspetto che prenderà il gadget


Ho anche postato nel web una dimostrazione del widget



Per la sua installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice

<style type="text/css">
ul#pulsante {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 100px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#pulsante li {
    width: 100px;
}
ul#pulsante li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#pulsante .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUoTWKYyFoNeCHOMaXqEhsyltpSNLoyCEIohMk9np68Fzn5qc_LDRwp8aoxue2cZUrZA9_QblqypSlmD7bhOzLy_1EPo6w6gfj13LiB7opTw9c5SDGKY-eL8zDxo_c6BJcHwt8_Fr_GS4r/s101/Twitter.png)no-repeat;
background-position:center center;
}
ul#pulsante .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNzd2h8jEBHlm6ZqqJFfgj-ydx3-St2b6rq5j4s6fUDFlRcpzHhPxHBtPXXDLwsy543KFHsJu1VPMbsvjbUoeLeW95hZoHj5Z1IOfeenMIdiTym2Ei1Aj4Z4XTheYyER084k_Tb965F2Y/s101/GooglePlus.png)no-repeat;
background-position:center center;
}
ul#pulsante .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_E1CoBjtGg8zJuRZG_4kU-08K7BsvUOtaO76iSrxmN7eo4qPIDDRn__gkwYJzJwhggwENUpwoZm2J2vvrlNfqtJbD1d56GtIzO29IQHt5rcDRxPTq71KEoNNBhi7UfhcEOc4cD6Ku8pO3/s101/Facebook.png)no-repeat;
background-position:center center;
}
ul#pulsante .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgLjKf7CBbmcIp0pKoS-z9JEw2envfz37jZECnSgQi4LMxQ7A_gDU5JL-lROLLAINCV150-Z_M052U7DR-nrJCQ3sR0Dm_ApoL_Q2YeJwBHhhd8vod9NEoWdKae3OvIHiQGTFrPaJcRGdT/s101/rss.png)no-repeat;
background-position:center center;
}
ul#pulsante .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhADgbtGiacdxdpYqLfMU90uwrlAoOG7EPaYQv1BGsfKqa9GQTGVPtbQnSG8GtCyF2-4YmUeKch7WGhObgnx0AFH_ELYdqPQomNRKfI5Z3iQd0vsDPBBaIBXaLBFR293CcKAv6E0FVIjku8/s101/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type='text/javascript'>
$(function () {
    $('#pulsante a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);   
$('#pulsante > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id='pulsante'>
<li class='twitter'><a href='https://twitter.com/parsifal32' target="_blank" rel="nofollow" title='Twitter'></a></li>
<li class='googleplus'><a href='https://plus.google.com/u/0/111056841635962157738'  target="_blank" rel="nofollow" title='Google Plus'></a></li>
<li class='facebook'><a href='https://www.facebook.com/parsifal32'  target="_blank" rel="nofollow" title='Facebook'></a></li>
<li class='pinterest'><a href='http://www.pinterest.com/parsifal32/'  target="_blank" rel="nofollow" title='Pinterest'></a></li>
<li class='rss'><a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN'  target="_blank" rel="nofollow" title='Rss'></a></li>
</ul>

Si salva. Le personalizzazioni più importanti sono state colorate di rosso e riguardano:
  1. Il posizionamento dei pulsanti; top: 100px; e left: 0px; significa visualizzare i bottoni a 100 pixel dalla parte alta e a 0 pixel dalla parte sinistra. Ovviamente si possono modificare i valori.
  2. I colori di sfondo si possono modificare consultando il post sui codici dei colori
  3. Si possono anche cambiare le immagini dei bottoni.
  4. Gli URL degli account sui social network debbono essere sostituiti con i vostri
  5. Se nel modello del vostro blog avete già JQuery allora potete tralasciare la riga evidenziata di giallo
Fonte | Blogstripsndclicks -


13 commenti :

  1. Ciao Ernesto,
    grazie per questo post, ho subito messo in pratica i tuoi consigli!
    Non capisco, però, perché appaiano due righe tratteggiate sui primi due pulsanti:
    http://eyelpis.blogspot.com/
    Ho controllato più volte il codice ed è esatto.
    Cosa sbaglio?
    Grazie
    EYELPIS

    RispondiElimina
    Risposte
    1. Forse ci sono delle interferenze tra il tuo modello e il bordo. Nella Demo non accade. Prova a togliere tutto questo codice

      border:1px solid #AFAFAF;
      -moz-border-radius:0px 10px 10px 0px;
      -webkit-border-bottom-right-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      -khtml-border-bottom-right-radius: 10px;
      -khtml-border-top-right-radius: 10px;
      -moz-box-shadow: 0px 4px 3px #000;
      -webkit-box-shadow: 0px 4px 3px #000;

      e guarda un po' come va
      @#

      Elimina
    2. Ciao Ernesto,
      grazie mille per la risposta!
      Ho provato a togliere il codice, ma non ha eliminato le righe, ha solo modificato i pulsanti.
      Ho provato, quindi, a modificare qualche parametro e son riuscito a capire dove sta il problema.
      Il parametro width va modificato a 0px

      ul#pulsante li {
      width: 100px;
      }


      ul#pulsante li {
      width: 0px;
      }

      Magari potrà servire a qualcun'altro :P

      Elimina
  2. Ciao Ernesto! Per adattare i colori a quelli del mio blog ho cambiato i codici colori delle singole icone. In questo modo però l' intera linguetta a scomparsa è di un unico colore (quello che ho scelto) e scompare l' icona del social. Ho sbagliato in qualche passaggio?
    Grazie

    RispondiElimina
    Risposte
    1. se poi ci fosse modo di aggiungere YouTube, sarebbe perfetto!

      Elimina
    2. I colori scelti sono quelli tipici dei vari social. Celeste per Twitter, Blue per Facebook, ecc. Se vuoi cambiare i colori delle linguette non basta cambiare i codici ma devi cambiare anche l'URL delle icone che ti devi creare da sola. Puoi provare anche a aggiungere il bottone di Youtube però devi creare il bottone e inserire altre linee di codice con la stessa sintassi di quelle già presenti
      @#

      Elimina
    3. Grazie mille. Appena ho tempo mi dedico a GIMP e provo qualche personalizzazione

      Elimina
  3. è possibile che con explorer non si visualizzino le immagini e restino le etichette bianche?ps con crhome e fire fox funziona... ho sbagliato qualche cosa o è normale?

    RispondiElimina
    Risposte
    1. Delle volte IE ha dei comportamenti strani. Prova a usare questa tecnica
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html
      per rendere più compatibile il modello di Blogger con Internet Explorer
      @#

      Elimina
  4. Ottimo, funziona a puntino, grazie.
    Mi potresti però aiutare nell'inserire anche il bottone di instagram?

    RispondiElimina
    Risposte
    1. Devi fare un lavoro grafico e creare il bottone di Instagram sullo stesso stile quindi aggiungere un altro blocco di codice con la stessa sintassi
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy