Barra verticale di bottoni sociali fluttuanti per Blogger.

Bottoni sociali fluttuanti per Blogger di Facebook, Twitter, Youtube, Google+, e Feed Rss posizionati sulla destra del layout.

Sono sempre alla ricerca di widget interessanti che possono essere apprezzati dai lettori che abbiano intenzione di aggiungere nuovi contenuti ai loro blog su Blogger. Vado a presentare una barra verticale di icone con collegamento ai principali social network e all'indirizzo dei feed che al passaggio del mouse cambiano colore con effetto animazione. 

Si tratta dei bottoni di Twitter, Facebook, Google+, Youtube e i Feed RSS. Per ciascuna di queste icone è stato creato un CSS Sprite con una diversa posizione del background all'atto del passaggio del cursore. I pulsanti scelti sono integrabili con altri mantenendo la stessa sintassi, creando delle nuove immagini e calcolando bene le distanze. Il posizionamento delle icone è sulla destra del layout e allo scorrere della pagina rimangono fisse in modo che i lettori possono averle sempre sott'occhio

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la sezione b:skin intorno alla 14-esima riga e si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice. Si cerca ora la riga ]]></b:skin> e, subito sopra, si incolla questo codice

/* Bottoni sociali fluttuanti */
.social-sidebar-buttons {
width: 32px;
margin-left: 1100px;
}
.sc-facebook {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
position:fixed;
right:0px;
z-index:1000;
top:200px;
}
.sc-facebook:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.sc-twitter {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
position:fixed;
right:0px;
z-index:1000;
top:250px;
}
.sc-twitter:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.sc-google {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
position:fixed;
right:0px;
z-index:1000;
top:300px;
}
.sc-google:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.sc-youtube {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
position:fixed;
right:0px;
z-index:1000;
top:350px;
}
.sc-youtube:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.sc-rss {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
position:fixed;
right:0px;
z-index:1000;
top:400px;
}
.sc-rss:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.twitter-hv {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjlmz51p6aN89ZOewo-VhFY6Ex20V2SgLagytAjZ3Eue1skORJxr-o8We9z2Y3rPJYBKV-9lLudnmwK8x7yOidftdrMdKkGB_WRUuhx-Jnd85cB_yUs9KX83zeV2xtTob6gfQj4J57k1M/s96/twitter-hv.png');
}
.facebook-hv {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSnXnfJsK_FWCW41mFjs7L6T37sCqal2MzqRt86ORJKH5zXrTDKrw8UGJEWfUuFPG7daWot-V2EGj1evqeSk4YTqCZO08g64a5EyiO_nFu9y7FJZ847YmEo2Tnz314rzGv4piZope-G0/s96/facebook-hv.png');
}
.google-hv {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgd8wSKd4oUWvnzcHRO0MGuyki43PKqqQ1Alru8g8Idz04vdWpCO30npWbktWqKivUjm9JP89XKeQrUrRskMys8dOYSTXqsdmiam0xVqJNZDvADnPo8yywCcLg-fbMW42KQM09O7y0UTU/s96/google-hv.png');
}
.youtube-hv {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsY2FxFY3XxH70Fo0aJ1349LImQBj990hEkdAcoTGaZPtfYsvFAvaVdMw6bGMn1iyNicxSAxEsAJPEpinGyXEh84_KPb-9Zp_J74tS-mO65bTTX0a8KBfZa6m6lGC9_-uMaHAwUH8qYA/s96/youtube-hv.png');
}
.rss-hv {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7IrSMSU9h0dvj_yEi-bL7tf1UPUiFINzU_DQY6Q8D_jIBiwe2uGIxWyx6neqL9xlmsPYaSTltdUPdq8cEo7c5WClWFfQN3m5XFBZi8W1aUW50tF_jL5kPWNOOVRYyuyDkRFbqgWDVMA/s96/rss-hv.png');
}

Successivamente si cerca la riga </body> e, subito sopra, si incolla questo secondo codice

<!-- Bottoni sociali fluttuanti -->
<a alt='Facebook' href='https://www.facebook.com/ideepercomputeredinternet' target='_blank'><div class='sc-facebook facebook-hv'/></a><a alt='Twitter' href='https://twitter.com/parsifal32' target='_blank'><div class='sc-twitter twitter-hv'/></a><a alt='Google+' href='https://plus.google.com/+ErnestoTirinnanzi' target='_blank'><div class='sc-google google-hv'/></a><a alt='Youtube' href='https://www.youtube.com/user/parsifal32' target='_blank'><div class='sc-youtube youtube-hv'/></a><a alt='Rss' href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' target='_blank'><div class='sc-rss rss-hv'/></a>

Si salva il modello.

Ciascuna icona è stata settata delle dimensioni di 48 pixel e posizionate 50 pixel una sotto l'altra a partire dalla prima che si trova a 200 pixel dalla parte alta del layout. È stata inserita anche una ombreggiatura che si visualizza al passaggio del cursore. La transizione ha una durata di 3 decimi di secondo (0.3s;) e i link ai vari social debbono essere sostituiti a quelli di questo sito.