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 -