Pubblicato il 31/01/15 - aggiornato il  | 10 commenti :

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://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.


10 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
  3. Bellissimo questo menù! Se io volessi farlo nel mio blog ma al posto di metterci i pulsanti sociali ci volessi mettere il link a pagine statiche specifiche del mio blog come potrei farlo?

    RispondiElimina
    Risposte
    1. Dovresti sostituire completamente queste immagini
      https://lh5.googleusercontent.com/--454Tz6ivgw/VMvHFyIav4I/AAAAAAAAq5w/6fzuu_XTuOc/s96/twitter-hv.png
      https://lh4.googleusercontent.com/-KwyPCwzcGc4/VMvG_mVuJOI/AAAAAAAAq5Y/Uwyr4AIUl8Q/s96/facebook-hv.png
      https://lh6.googleusercontent.com/-Q3Wal_jQaPU/VMvHBiTcpWI/AAAAAAAAq5g/fsC0xXnwwfw/s96/google-hv.png
      https://lh4.googleusercontent.com/-AA98FryJSyM/VMvHHoxCY0I/AAAAAAAAq54/XdbEiCAQSl8/s96/youtube-hv.png
      https://lh5.googleusercontent.com/-4S2zRA2jjiU/VMvHDsivCqI/AAAAAAAAq5o/6q_Bf5cjzNk/s96/rss-hv.png
      con altre immagini doppie della stessa dimensione create da te che riprendano i temi trattati nelle le tue pagine statiche. Poi basterebbe sostituire i link dei social Twitter, Facebook, ecc..., nel secondo codice, con gli URL alle pagine che vuoi collegare
      @#

      Elimina
    2. Grazie mille! provo e ti farò sapere se riesco

      Elimina
    3. Ho provato a personalizzarlo e non mi compare nulla, così ho pensato di aver sbagliato qualcosa nel codice anche se non mi faceva errore e ho provato con il tuo codice originale in un mio blog di prova e non mi compare nulla, non capisco cosa sbaglio (layout tema semplice di blogger)

      Elimina
    4. La Demo funziona però il codice è di tre anni e mezzo fa. Comunque non c'è javascript e quindi non capisco perché non funzioni
      @#

      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