Creare un menu jQuery per blogger

Finalmente anche noi, fedelissimi utenti di Blogger, potremo usufruire di un menu realizzato in jQuery.

Eh si, avete capito bene. Ora anche Blogger, come Wordpress e Joomla, potrà usufruire di questa caratteristica.

Non ci credete? Eccovi proposto un esempio!

(Qualora non venga visualizzato correttamente, visitate questa pagina)

Bello vero? Niente paura, da oggi anche voi potrete utilizzarlo!

Per prima cosa rechiamoci in Layout/Modifica HTML ed eseguiamo, per precauzione, il backup del nostro modello.

Ricerchiamo la stringa <b:skin><![CDATA[/* e subito dopo facciamo il copia ed incolla di questo codice CSS.

.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
#outerContainer { width:542px; height:202px; margin:auto; position:relative; }
#imageScroller { width:542px; height:202px; position:relative; background:#000000 url(http://img34.imageshack.us/img34/593/imagescrollerbg.png) no-repeat; }
#viewer { width:522px; height:182px; overflow:hidden; margin:auto; position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls { width:534px; height:47px; background:url(http://img35.imageshack.us/img35/1139/controlsbg.png) no-repeat; position:absolute; top:4px; left:4px; z-index:10; }
#controls a { width:37px; height:35px; position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:100%; font-weight:bold; width:100%; text-align:center; margin-top:10px; }
#rtl { background:url(http://img31.imageshack.us/img31/4483/rtl.png) no-repeat; left:100px; }
#rtl:hover { background:url(http://img30.imageshack.us/img30/9482/rtlover.png) no-repeat; left:99px; }
#ltr { background:url(http://img33.imageshack.us/img33/4863/ltr.png) no-repeat; right:100px; }
#ltr:hover { background:url(http://img32.imageshack.us/img32/8273/ltrover.png) no-repeat; }

Al termine delle modifiche, salviamo il modello.

Ora rechiamoci in Layout/Elementi pagina e, cliccando su Aggiungi un Gadget, selezioniamo HTML/JavaScript.

Verrà così aperta una finestra popup. Inseriamo un titolo, selezioniamo questo codice HTML e inseriamolo al suo interno.

<div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="http://www.lacameradeiblog.com" title="La camera dei blog"><img class="logo" id="lacameradeiblog" src="http://img32.imageshack.us/img32/2702/lacameradeiblog.jpg" alt="La camera dei blog"></a>
<a class="wrapper" href="http://www.ilsitoblu.com" title="Il sito blu"><img class="logo" id="ilsitoblu" src="http://img33.imageshack.us/img33/5119/ilsitoblu.jpg" alt="Il sito blu"></a>
<a class="wrapper" href="http://www.apple.com" title="Apple"><img class="logo" id="apple" src="http://img35.imageshack.us/img35/3263/applet.jpg" alt="Apple"></a>
<a class="wrapper" href="http://mozilla-europe.org/en/firefox" title="Firefox"><img class="logo" id="firefox" src="http://img34.imageshack.us/img34/2369/firefoxf.jpg" alt="Firefox"></a>
<a class="wrapper" href="http://twitter.com" title="Twitter"><img class="logo" id="twitter" src="http://img31.imageshack.us/img31/270/twitteri.jpg" alt="Twitter"></a>
</div>
</div>
<div align="center" style="font-size:14px"><a href="http://www.lacameradeiblog.com/2009/05/creare-un-menu-jquery-per-blogger.html">Preleva</a></div>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://kamyxxii.altervista.org/perblog/menu.js"></script>

Concludiamo la nostra azione cliccando su Salva.

Ci rimarrà quindi da compiere un'ultima operazione: cambiare le immagini e i link delle icone del menu.

Per far ciò, basterà editare queste righe, modificando il valore href per il link, src per l'immagine, title per il titolo del collegamento, id per l'id del collegamento e alt per il titolo dell'immagine.

<a class="wrapper" href="http://www.lacameradeiblog.com" title="La camera dei blog"><img class="logo" id="lacameradeiblog" src="http://img32.imageshack.us/img32/2702/lacameradeiblog.jpg" alt="La camera dei blog"></a>

Spero di essere stato abbastanza chiaro... se così non fosse, non esitate a lasciare commenti!