Come inserire un Menù laterale a tendina scorrevole su Blogger.

I lettori abituali di questo blog si saranno accorti della modifica dell’aspetto e della comparsa di un menù scorrevole sulla sinistra. Da un Menù orizzontale di questo tipo

sono passato ad un Menù Verticale a scomparsa con questo aspetto

Le ragioni della modifica sono essenzialmente dovute al fatto che
1)I link delle varie sezioni erano collegati a delle immagini e quindi Google non le riteneva sezioni e come tali e non le indicizzava. Adesso spero che lo faccia
2)Il sistema precedente aveva uno spazio oggettivamente limitato dalla larghezza del layout in questo caso invece possiamo inserire un numero decisamente superiore di link
Se volete fare anche voi questa modifica vi illustro brevemente il procedimento ricordando che ci sono però molte personalizzazioni da fare e che ho testato la modifica oltre che su Firefox anche su Internet Explorer, Chrome e Opera.
Selezionare, copiare e salvare il codice di questo file, che comunque riporto qui sotto

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=170; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#003366";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Trebuchet MS";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FDBCB7";
linkTarget="_top";
linkAlign="Left";
barBGColor="#940F04";
barFontFamily="Trebuchet MS";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="MENU LATERALE"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["MENU"] //create header
ssmItems[1]=["HOME", "http://www.ideepercomputeredinternet.com/", ""]
ssmItems[2]=["CREARE UN BLOG", "URL_pagina","_new"]
ssmItems[3]=["GUADAGNARE", "URL_pagina", "_new"]
ssmItems[4]=["INCONTRI E EROS", "URL_pagina", "_new"]
ssmItems[5]=["MODELLI PER BLOGGER", "URL_pagina", "_new"]
ssmItems[6]=["MOTORE FILM STREAMING", "URL_pagina", "_new"]

ssmItems[7]=["Privacy", "URL_pagina", "_new", 1, "no"] //create two column row
ssmItems[8]=["Email", "URL_pagina", "_new",1]

ssmItems[9]=["LINK ESTERNI", "", ""] //create header
ssmItems[10]=["VIDEOCHAT", "URL_pagina", "_new"]
ssmItems[11]=["TV IN STREAMING", "URL_pagina", "_new"]
ssmItems[12]=["FORUM", "URL_pagina", "_new"]
ssmItems[13]=["GIOCHI GRATIS", "URL_pagina", "_new"]
ssmItems[14]=["RICERCA FILM", "URL_pagina", "_new"]
buildMenu();

//-->

Per agevolare coloro che volessero inserire questo menù nel proprio blog ho suddiviso le personalizzazioni in tre diversi colori

1. Per quanto riguarda quelle con il colore verde possiamo scegliere se aprire il collegamento nella stessa scheda, e allora inseriamo solo le doppie virgolette “” come nel caso del primo link denominato HOME, oppure inseriamo "_new" se vogliamo si apra in una scheda diversa
2. Le personalizzazioni in blu sono non essenziali nel senso che riguardano l’aspetto del menù, mentre quelle in rosso lo sono e riguardano il nome e gli URL dei collegamenti
3. 150 è la posizione in pixel del menù in senso verticale
4. 170 è la larghezza del menù in senso orizzontale
5. verdana è la famiglia di font del titolo del menù
6. #003366 è il colore di sfondo della barra orizzontale in cui è inserita la scritta MENU e LINK ESTERNI
7. Trebuchet MS è la famiglia di font dei nomi dei collegamenti. Conviene mettere quella del nostro blog
8. #FDBCB7 è il colore di sfondo del collegamento quando viene puntato con il mouse
9. #940F04 è il colore della barra del menù verticale. Conviene scegliere un colore adatto al proprio sito
10. MENU LATERALE è il titolo del menù che si legge sulla barra
11. MENU E LINK ESTERNI sono i titoli delle due sezioni in cui è diviso il menù
12. Privacy e Email sono due link inseriti in uno stesso settore quindi devono avere dei nomi corti
13. Per quanto riguarda le personalizzazioni indicate in rosso occorre inserirne il titolo, p.e. HOME e l’URL del collegamento p.e. http://www.ideepercomputeredinternet.com/, che è l’unico URL che ho lasciato del mio codice per mostrare il metodo di inclusione; notare la slash (/) finale.
14. Si possono inserire tutti i collegamenti che si vuole attraverso l’inserimento di altre righe nella falsariga di quelle già presenti con la struttura
    ssmItems[num]=["TITOLO", "URL_pagina", "_new"] dove al posto di num mettete il numero cardinale del collegamento
15. Si possono anche togliere delle righe se il numero dei collegamenti ci pare eccessivo
16. Si possono creare altre colonne doppie reiterando la struttura degli ssmItems[7] e [8]
17. Si possono creare altre sezioni inserendo altre stringhe del tipo ssmItems[num]=["TITOLO", "", ""] //create header dove al posto di num si mette il numero in cui si vuole inserire la sezione 
18. Una DEMO di questo menù laterale è visibile nel blog - Prova Menù Laterale -Aggiornamento: Ho creato anche uno script per l'inserimento contemporaneo di tre menu, uno a sinistra, uno al centro e uno a destra; puoi vedere la demo in un blog di prova e leggere l'articolo

Fatto questo salvate il file personalizzato in formato txt, cioè come file di testo, con il nome ssmItems.js usando il programma Notepad++. Dopo che l’avete caricato su Google Sites o DropBox dovete acquisirne l’URL diretto. Adesso dobbiamo operare sul modello e andare su Layout > Modifica HTML e scaricare un modello completo per sicurezza. Cercate la riga di codice </head> e immediatamente sopra incollate quest’altro codice dove al posto del link http://is.gd/1p2mk, presente nella penultima riga, inserite l’URL del file che avete caricato sul web dopo averlo personalizzato come descritto. Salvate il modello e visualizzate la vostra opera. Enjoy .

• Inserire tre menù scorrevoli in un sito -

Fonte | Maximus & Dynamic Drive -