Menù Laterale a scomparsa per Blogger.

Come installare un menù laterale a scomparsa che appare al passaggio del cursore e che mostra anche i bottoni per Facebook, Twitter e Google+.

Dopo un paio di mesi in cui ho parlato e scritto di altro passo a presentare un nuovo menù che credo possa essere utile a diverse tipologie di blog. Va detto che è un tipo di menù che sarà visibile solo nella versione desktop ma che è di facile installazione visto che non occorre neppure modificare il modello.

Insieme alle voci classiche del menù che possono essere scelte a piacere sono presenti anche i bottoni per seguire l'autore su Twitter, nella pagina fan di Facebook e nella pagina brand di Google+. Accanto a ciascuna voce del menù è presente una icona particolare generata dallo script Font Awesome.

Il menù viene visualizzato solo se si passa con il cursore sopra alla icona posta in alto a destra e quindi permette un grosso risparmio di spazio

Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezione del sito e senza digitare il titolo, si incolla il seguente codice

<style>#slidemenu{position:fixed;top:20px;right:-280px;background:#f8f8f8;float:right;width:280px;height:100%;font:normal 20px Oswald;display:block;padding:0;z-index:9999;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;} #slidemenu:hover {border-left:2px solid #6b6b6b;right:0px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;} .immagine:before{content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_s2ofjp72TFmKr2THzozBgkqwyL4ytlUiZDrevwLSqBMBNFETWjlz1jkD75mNEN7WVQbTtz7Z28enRbN4oHLQH-G3wYfGHkjWN7FU-Kr1qYdA-i79K-6a0DFxszNSoZHsaCoPa3q4IIs/s120-Ic42/menu.gif);position:absolute;top:0;left:-40px;} #slidemenu a{color:#333;text-decoration:none;display:block;padding:5px;} #slidemenu a:hover{color:#fff;border-right:5px solid #000;background:#5f5f5f;} #slidemenu li{list-style:none;line-height:50px;border-bottom:2px dotted #000} #slidemenu.active {right:0;} #bottoni{width:300px;} .bface{float:left;margin-left:12px}.btwitter{float:left;}</style> <link href=' https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/awesome.css' rel='stylesheet'/> <div id="slidemenu"> <ul><li><a href="#" title="home"><i class="icon-home"></i>Home</a></li> <li><a href="#" title="Contatto"><i class="icon-envelope"></i>Contattami</a></li> <li><a href="#" title="About me"><i class="icon-user"></i>Profilo</a></li> <li><a href="#" title="Info sui cookie"><i class="icon-th"></i>Cookie Policy</a></li> <li><a href="http://www.ideepercomputeredinternet.com/p/gli-ultimi-1000-post-pubblicati.html" title="indice post"><i class="icon-forward"></i>Indice post</a></li> <a class="immagine" href="#" title="apri/chiudi"></a></ul> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <div class="g-page" data-layout="landscape" data-href="https://plus.google.com/+ideepercomputeredinternet"></div> <div id='bottoni'><div class='bface'> <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fideepercomputeredinternet&amp;width=100&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;" allowtransparency="true"></iframe> </div><div class='btwitter'> <a href="https://twitter.com/parsifal32" class="twitter-follow-button" data-show-count="false" data-lang="it">Segui@parsifal32</a><br/><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div></div></div>

Si salva l'elemento. Le personalizzazioni riguardano:

1. I codici dei colori del menù
2. La famiglia di font (Oswald)
3. L'icona del menù visualizzata sulla destra sostituendone l'URL
4. Lo stile del bordo tra elemento e elemento modificando il codice evidenziato di beige 
5. Gli indirizzi delle pagine collegate inserendoli al posto del cancelletto #
6. I nomi degli elementi del menù colorati di blu
7. Il nome o ID della pagina fan di Facebook da sostituire a ideepercomputeredinternet
8. L'username usato su Twitter da sostituire a parsifal32
9. L'ID della pagina brand o il suo vanityURL da sostituire a +ideepercomputeredinternet
10. Per evitare problemi di larghezza di banda è opportuno scaricare il file evidenziato di giallo incollando il suo URL nel browser per poi caricarlo sul nostro Google Drive, ottenere il link diretto da sostituire a quello del codice
11. Eliminare la riga evidenziata di verde se nel modello fosse già presente il codice di Google+
12. Al posto della pagina brand di Google Plus si può optare per il profilo inserendo il suo ID o il VanityURL e sostituendo g-page con g-person
13. Si possono aggiungere altre voci del menù mantenendo la stessa sintassi.
14. L'icona accanto all'elemento del menù è data da class="icon-user" class="icon-envelope" class="icon-th" class="icon-forward" che riprendono i CSS del file awesome.css.

Demo
Clicca qui