Slide Menù per i nuovi modelli di Blogger.

Alcune personalizzazioni che andavano bene, e funzionano tuttora, per i vecchi modelli di Blogger non sono più compatibili con i nuovi template che sono stati introdotti insieme al Designer Modelli. E' mia intenzione quindi di riproporre alcuni dei widget, degli effetti e dei menù in modo che siano installabili anche da chi usa l'ultima generazione di template. Il Menù laterale espandibile risale a un anno e mezzo fa e mi risulta da alcuni commenti che la sua installazione sia diventata problematica. Eccone una nuova versione che ho testato sul modello "Semplice". Ricordo che, nel caso si modifichi il template passando a un altro mediante le funzionalità del Designer Modelli, questo menù sparirà e dovrà essere reinstallato. Comunque ho constatato che funziona con tutte le versioni del modello "Simple". Questo fa presupporre che sia installabile su tutti i nuovi modelli di Blogger, anche se per ovvie ragioni di tempo non ho potuto verificarlo.

Per prima cosa occorre costruirsi la struttura del menù. Ecco uno screenshot del suo aspetto che aiuta a progettarlo

In posizione normale si vede solo una barra verticale sulla sinistra che si apre nel momento in cui si passa sopra con il mouse. Ogni voce è collegata alla pagina corrispondente che può essere interna o esterna. Ho pubblicato in rete un Esempio di codice per Slide Menù. Dovrà essere copiato in un file di testo e configurato secondo le vostre esigenze. Ho evidenziato con colori diversi le personalizzazioni che si possono effettuare

1. YOffset=150; rappresenta la coordinata verticale dell'inizio del menù
2. menuWidth=170; rappresenta la larghezza in pixel del menù quando viene aperto
3. verdana e Trebuchet MS sono la famiglia di caratteri usata per il menù
4. hdrBGColor="#003366"; è il codice del colore delle sezioni principali (dove c'è MENU e LINK ESTERNI)
5. barBGColor="#940F04"; è il codice del colore della barra sempre visibile (MENU LATERALE)
6. Le voci e gli URL inseriti sono riferiti a questo blog e quindi devono essere sostituiti con i vostri
7. "_new" serve per far aprire quella voce in un'altra scheda. Se si vuole che si apra nella stessa scheda si può sostituire con "". Si tratta in sostanza di digitare due doppie virgolette affiancate.
8. La doppia voce su una stessa linea è presente su ssmItems[7] e ssmItems[8]. Se ne possono inserire altre mantenendo la stessa sintassi
9. Si possono togliere delle righe o aggiungerne altre. L'importante è che i numeri degli elementi siano tutti presenti e non ci siano doppioni
10. Il menù ha due sezioni ma se ne possono creare altre inserendo una riga con questa sintassi ssmItems[X]=["TITOLO", "", ""] dover al posto di X si inserisce il numero progressivo.
11. Dopo che è stato creato il menù con il Blocco Note andate su File > Salva con nome, dategli un nome e salvatelo.
12. Con il programma Notepad++ (o analogo) aprire questo file di testo e salvarlo nuovamente ma in formato javascript

Adesso dovremo caricare il file su un servizio di hosting che lo supporti. Consiglio di farlo con Google Code ma ritengo che possa funzionare anche usando Google Sites con la modalità Schedario. Acquisire quindi l'URL tramite i procedimenti illustrati nei rispettivi post.

Adesso bisogna mettere mano al modello. Entrare su Design > Modifica HTML e cercare la riga </head>. Immediatamente sopra incollate il codice

<!--SIDE-MENU-STARTS-->
<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>
<SCRIPT SRC='http://idee-per-computer-ed-internet-script.googlecode.com/files/slide-menu.js' language='JavaScript1.2'>
//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://maximus.ravecore.com/
//For full source, and 100&#39;s more DHTML scripts, visit http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT SRC='http://idee-per-computer-ed-internet-script.googlecode.com/files/ssmitems2.js' language='JavaScript1.2'/>
<noscript><a href='http://goo.gl/AyThB' target='_blank'><span style='font-size: x-small;'>Ad Slide Menu</span></a></noscript>
<!--SIDE-MENU-STOPS-->

dove al posto dell'URL http://idee-per-computer-ed-internet-script.googlecode.com/files/ssmitems2.js incollate quello che avete acquisito dopo averlo caricato su Google Code o Google Sites. Salvate il modello e visualizzate il blog.
Prima di procedere alla configurazione del menù, vi consiglio di incollare questo codice così com'è per vedere se funziona con il vostro template e, nel caso, procedere con la personalizzazione.

• Demo dello Slide Menù -

Fonte | Dynamic Drive -