Pubblicato il 31/01/15e aggiornato il

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

barra-verticale-flottante

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://lh5.googleusercontent.com/--454Tz6ivgw/VMvHFyIav4I/AAAAAAAAq5w/6fzuu_XTuOc/s96/twitter-hv.png');
}
.facebook-hv {
    background-image: url('https://lh4.googleusercontent.com/-KwyPCwzcGc4/VMvG_mVuJOI/AAAAAAAAq5Y/Uwyr4AIUl8Q/s96/facebook-hv.png');
}
.google-hv {
    background-image: url('https://lh6.googleusercontent.com/-Q3Wal_jQaPU/VMvHBiTcpWI/AAAAAAAAq5g/fsC0xXnwwfw/s96/google-hv.png');
}
.youtube-hv {
    background-image: url('https://lh4.googleusercontent.com/-AA98FryJSyM/VMvHHoxCY0I/AAAAAAAAq54/XdbEiCAQSl8/s96/youtube-hv.png');
}
.rss-hv {
    background-image: url('https://lh5.googleusercontent.com/-4S2zRA2jjiU/VMvHDsivCqI/AAAAAAAAq5o/6q_Bf5cjzNk/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.




5 commenti :

  1. questa personalizzazione è proprio bella

    RispondiElimina
  2. Veramente ben fatta ed era una cosa che stavo cercando da molto tempo... unica domanda: e se volessi metterla a sinistra invece che a destra?

    RispondiElimina
    Risposte
    1. Sostituisci left con right e right con left. Non ho testato ma dovrebbe funzionare
      @#

      Elimina
    2. Funziona! ho invertito tutti i left con i right ed ho anche sostituito la dicitura "margin:0px 0 0 48px" con " margin:48px 0 0 0"px".
      Grazie mille!

      Elimina
    3. Mi ero dimenticato del margine :). Comunque mi pare più giusto "margin:0px 48px 0px 0px; Prova anche con questo
      @#

      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.