07 luglio 2009

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
image
sono passato ad un Menù Verticale a scomparsa con questo aspetto
menu-tendina
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 Open-mouthed.

Fonte | Maximus & Dynamic Drive -





34 commenti:

  1. è possibile farlo senza scorrimento? a me servirebbe che rimane fisso.. grazie e complimenti per il blog.

    RispondiElimina
  2. @michele
    senza scorrimento deve essere in posizione orizzontale altrimenti non si vede la pagina. In linea di massima si può anche creare un menù a tendina verticale. Se trovo qualcosa di interessante in questo senso lo pubblico.
    Ciao

    RispondiElimina
  3. ok grazie,comunque intendevo senza lo scorrimento su è giu' in pratica sempre laterale che si apre a tendina ma fisso.. grazie come sempre per i tuoi articoli interessantissimi..

    RispondiElimina
  4. @michele
    Se ho capito bene tu intendi un modello a tre o più colonne con la colonna di sinistra che serve da menu? In questo caso credo che lo potresti fare anche da solo inserendo delle immagini con dei link. Comunque se vedo qualcosa di simile lo segnalo.
    Ciao

    RispondiElimina
  5. Solo una cosa sei davvero geniale!!!!

    RispondiElimina
  6. ciao fenomeno, ho fatto tutto quello che hai detto, credo, però mi compare questo errore quando tento di salvare il modello html,
    magari te riesci a capire dove sbaglio :)

    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: Open quote is expected for attribute "{1}" associated with an element type "SRC".

    RispondiElimina
  7. @L'aLtra Notizia
    Sono tutt'altro che un fenomeno purtroppo. Per quanto riguarda l'errore che ti compare ci possono essere varie possibilità
    1)Il tuo modello non è compatibile ma la reputo molto remota
    2)E' probabile che Blogger stia sbagliando, riprovando tra un giorno può essere che funzioni perché vedo che ci sono dei problemi anche con Blogger in Draft
    3) Ci può essere stato un errore di copiatura, anche da parte mia.
    4)Ho riprovato ad inserirlo e dà lo stesso errore anche a me
    Prova ad inserire il codice da questo file per vedere se ti dà lo stesso errore.
    Fammi sapere, ciao

    RispondiElimina
  8. ciao,
    ho provato ad usare il file che hai messo, ma ora mi da questo errore:

    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The reference to entity "auth" must end with the ';' delimiter.

    RispondiElimina
  9. @L'Altra Notizia
    Dal tipo di errore sembra che tu abbia tralasciato o messo in più un punto e virgola. Non so che dirti, è lo stesso codice che c'è su questo blog. Siccome l'articolo era venuto con la formattazione sbagliata, tutto pieno di spazi superflui, ho pensato che si fosse sporcato il codice.
    Il codice va bene, l'ho ricontrollato, guarda se per caso ti è sfuggito qualche apostrofo...

    RispondiElimina
  10. grazie per la pazienza :) purtroppo continaua darmi lo stesso errore.... faniente dai ^_^ ci risentiamo al prossimo articolo :P

    RispondiElimina
  11. sono sempre io, scusa se rompo, però ho forse scoperto una cosa che può interessarti. spero di riuscire a spiegarmi bene.

    Ho creato un altro blog per fare esperimenti e vedere se fosse solo il mio che non funzionava....

    In un primo tempo, anche nel nuovo blog mi dava lo stesso errore, poi ,quasi per caso, ho cliccato su "RIPRISTINA MODELLO CLASSICO" anche il layout del campo "MODIFICA HTML" è cambiato, lo scrolling orizzontale è aumentato di molto.

    Cmq per sfizio ho provato a mettere lo stesso codice nel "modello classico" e magia,funziona perfettamente.

    Purtroppo per me però, non posso utilizzare questo modello, perchè perderei tutte le modifiche fatte in precedenza..... Te l'ho voluto segnalare magari ti può tornare utile.
    spero di essermi spiegato abbastanza bene. ciao :)

    RispondiElimina
  12. @L'Altra Notizia
    Ti sei spiegato benissimo. Il modello classico risale a qualche anno fa quando la piattaforma Blogger si chiamava Blogspot e non faceva parte della galassia Google.
    Scegliendo quella opzione le cose diventano un po' più difficili per l'inserimento dei widget ma ci sono meno limitazioni sull'HTML.
    Nel tuo blog comunque non lo utilizzare perché complessivamente è da preferire il sistema attuale.
    Per quanto riguarda il menù laterale prova ad inserire il mio codice, di cui ho messo il link in un commento, senza modifiche, poi ovviamente lo togli. Ci sono due possibilità
    1)Non ti accetta le modifiche e allora c'è un problema di incompatibilità con il tuo modello e devi pensare ad altre opzioni
    2)Ti accetta le modifiche e visualizzi perfettamente il menù, allora vuol dire che hai fatto qualche errore di procedura
    Ciao e grazie della segnalazione

    RispondiElimina
  13. ho combinatoooooooooooooo

    probabilmente sono io nubbio e non lo avevo capito, ma quando si uppa il file con la struttura del proprio menù su Google sites e si prende il link, a me funziona solo se quel link lo accorcio con "is gd" altrimenti mi da continuamente errore
    cmq grazie sempre super mitico ^_^

    RispondiElimina
  14. @L'Altra Notizia
    Mi aspettavo che fosse un problema di questo tipo. In questo campo molto spesso si deve andare per esclusione.
    Ciao

    RispondiElimina
  15. Grazie ancora Parsifal, le tue mini guide sono tra le migliori del web!

    Ho inserito il tuo menù laterale sul mio sito mantenendo alcuni tuoi link.

    Il menù si può inserire anche in alto o a destra?

    Ciao!

    Francesco

    RispondiElimina
  16. @Striscianotizia
    Francesco,
    grazie per il complimento e grazie per aver mantenuto anche dei miei link nel menu. Ho contraccambiato inserendo un collegamento alla tua home in questa pagina.
    Per quanto riguarda la domanda specifica il fatto è che lo script l'ho preso dal sito Dynamic Drive, come da link a fondo pagina, su due piedi non saprei dirti se è possibile cambiargli posizione; forse sì cambiando alcuni parametri. Magari do un'occhiata e se vedo che la cosa è semplice lo comunico con un post.
    Ciao

    RispondiElimina
  17. Ciao, e' da ieri che giro su questo sito...ma e' favoloso!! sono qui per imparare e le lezioni sono tante!!
    piene di dettagli, insomma siete bavissimi !! sono in cerca del procedimento del menu' orizzontale..ma non lo trovo, non c'e' la procedura? grazie della risposta!! ciao da fruttella

    RispondiElimina
  18. @Fruttella
    Un procedimento per inserire un menù orizzontale è quello descritto in questo articolo. Non so se fa al caso tuo, comunque continua a seguirmi che parlerò ancora dei Menù.
    Ciao

    RispondiElimina
  19. Ciao Parsifal32, si e' proprio quello che cercavo!! grazie!!
    ho trovato per caso questo blog cercando d'imparare l'html ...finalmente un blog interessante e istruttivo!! ti seguiro' e verro' a trovarti spesso m'interessano le tue lezioni. A presto e buona serata!!

    RispondiElimina
  20. Parsifal, ciao!

    Ho trovato su questa pagina

    http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm

    da te suggeritami, le istruzioni per inserire su blogger un menù a tendina in alto e uno anche a destra che vorrei ambedue inserire nel mio blog.
    Quando hai tempo potresti darci un occhio?

    Grazie

    Inoltre volevo chiederti se è possibile fare una piccola donazione sul tuo blog per sostenere il tuo grande lavoro.

    Francesco

    RispondiElimina
  21. @Francesco
    Per quanto riguarda la donazione avevo messo un bottone per Paypal ma in tre mesi non avevo visto neppure un euro quindi l'ho tolto :).
    Darò uno sguardo alla documentazione dei tre menu scorrevoli nella stessa pagina che sono indubbiamente molto di effetto e senza promettere nulla vedrò che posso fare. Ciao

    RispondiElimina
  22. @SrisciaNotizia
    E' stato più semplice del previsto, puoi leggere l'articolo :)

    RispondiElimina
  23. Parsifal32 grazie della ennesima guida
    ben fatta!

    Ho inserito i tre MENU' nel mio sito.

    Però ho dei gravi problemi generali di visualizzazione con INTERNET EXPLORER.
    Se avrai tempo, guarda il mio blog con IE, mi servirebbe un aiuto!

    ciao! :)

    Francesco

    RispondiElimina
  24. @Striscia Notizia
    E' vero hai problemi con IE. In compenso i tre menù si vedono sempre benissimo :). Non sono però così pratico di Wordpress per darti la dritta giusta. In Blogger ho risolto eliminando un paio di widget. Fai anche tu così. Cerca di provare a togliere qualcosa e poi guarda come va. In questo caso bisogna soprattutto fare esperimenti e tentativi.
    Io sarei del parere di eliminarlo defininitivamente IExplorer :)

    RispondiElimina
  25. HO seguito tutte le istruzioni, sono arrivata alla fine dove dici 'incollate quest'altro codice', ho aperto e... non c'è niente! Come si può fare? Grazie, ciao

    RispondiElimina
  26. @Monica D.
    Questo articolo è piuttosto datato e si basa su metodi di caricamento di file non più affidabili. Quando ho un po' di tempo vedo di riproporlo in una forma più semplice, sperando che sia compatibile con i nuovi template di Blogger perché la cosa è tutt'altro che scontata.
    Ciao

    RispondiElimina
  27. ciao ernesto
    ma sapresti dirmi quale
    il codice colore
    del testo
    home
    contati
    creare un blog

    e cosi in fila
    grazie

    RispondiElimina
  28. un altra cosa
    se possibile che ci sia un modo rimanga fisso come i l menu a destra su questo tuo link http://tre-menu-scorrevoli.blogspot.com/
    ad esempio quello a sinistra va sempre verso su
    invece quello a destra sta fisso al centro
    grazie mille di nuovo

    RispondiElimina
  29. @denny
    Non mi pare ci sia il codice del colore del testo. Per un singolo menù a tendina vai qui
    http://www.ideepercomputeredinternet.com/2009/07/come-inserire-un-menu-laterale-tendina.html
    Il menù a destra rimane fisso non so perché... forse nel tuo browser :)

    RispondiElimina
  30. salve, vorrei fare una domanda forse OT: esiste un modo per mettere nel blog un gadget html (esempio la chat Xat) a scomparsa laterale in modo da farla comparire soltanto se si vuole? Grazie!

    RispondiElimina
  31. @Mario Alan
    Tutto può essere ma non ne sono a conoscenza. Si possono invece inserire dei widget a scomparsa
    http://www.ideepercomputeredinternet.com/2011/02/come-espandere-o-nascondere-testo.html
    ma non laterale

    RispondiElimina
  32. quello che mi hai consigliato va molto bene lo stesso..grazie 1000!! sempre molto gentile e prezioso nei consigli! :D

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.