Pubblicato il 13/09/12e aggiornato il

Come installare un menù direttamente nel modello.

Come inserire tutto il codice del menù in un modello per poi visualizzarlo sopra l'Intestazione del blog.
Uno dei maggiori problemi che si incontrano nella personalizzazione dei template di Blogger è sicuramente quello dell'installazione del menù. Su Blogger è possibile creare un menù orizzontale o verticale utilizzando le pagine statiche. Da qualche mese si possono aggiungere altri link anche esterni al menù delle pagine di Blogger. Questo però in genere non soddisfa gli utenti più esigenti che vogliono mostrare ai propri lettori molti più contenuti di quelli accessibili con un menù a un solo livello.

C'è poi anche una esigenza estetica che induce molti fruitori di Blogger a optare per un menù fatto da soli visto che si può attingere a una gran mole di menù personalizzati presenti in rete e visionabili anche in questo blog. Ci sono però le note dolenti che nel caso dei menù sono veramente parecchie:

  1. Il nostro modello, specialmente se di ultima generazione, spesso non è compatibile con il menù che vogliamo installare.
  2. Avendo un dominio personalizzato i file caricati su Google Sites non funzionano
  3. Caricando i javascript e i CSS su un hosting esterno spesso si rallenta il caricamento del sito
  4. Vorremmo installare il menù sopra alla intestazione ma, se incolliamo il codice in quell'elemento HTML/Javascript, il menù smette di funzionare
  5. Il nostro template utilizza delle librerie javascript che sono incompatibili con quelle del menù.
  6. Il menù funziona bene con alcuni browser mentre non è così con gli altri.
  7. Usando degli hosting esterni siamo colpiti da eventuali loro disservizi
Mi fermo qui ma credo che potrei trovare anche altre problematiche che riguardano le impostazioni della lunghezza del menù, del suo corretto posizionamento e dell'apertura delle voci secondarie. Con questo post voglio indicare delle strade, dare degli indirizzi per risolvere almeno qualcuno di questi grattacapi. Mi sono deciso a scriverlo dopo aver installato il MattBalckMenù sopra alla intestazione del blog. Le modeste soluzioni che ho trovato forse possono essere di aiuto anche ad altri.

STRUTTURA DEI MENU

In genere i menù sono formati da tre parti: i file CSS che ne determinano l'aspetto, i file javascript per il loro funzionamento e il codice HTML vero e proprio per inserire le voci con i relativi link. I file CSS si riconoscono perché hanno questa estensione. Facendo l'esempio del MattBlackMenù ce ne sono due

ddlevelsmenu-base.css e ddlevelsmenu-topbar.css

Se si ha un dominio personalizzato questi file devono essere caricati su un hosting che li supporti come Dropbox mentre se si ha un sito del tipo blogspot.com possiamo anche usare Google Sites. In realtà questi file possono anche essere caricati direttamente nel modello per non dipendere da eventuali disservizi di Dropbox e per non consumare la larghezza di banda che abbiamo a disposizione.

Sempre facendo il solito esempio, in questo caso dopo aver cancellato dal template le righe,

<link href=' .... /ddlevelsmenu-base.css' rel='stylesheet' type='text/css'/>
<link href='  .... /ddlevelsmenu-topbar.css' rel='stylesheet' type='text/css'/>

si va su Modello > Modifica HTML > Procedi e si cerca il tag ]]></b:skin> . Subito sopra si incollano i file CSS così come sono dopo averli aperti con Notepad++ o altro editor di linguaggi di programmazione

men-modello-blogger

Per non fare confusione è opportuno inserire dei commenti che non vengono rilevati dai browser ma che servono per indicarci dove inizia e dove finisce il codice e che sono utilissimi per poi ritrovarlo usando Ctrl+F o F3. La struttura dei commenti nei CSS deve essere la seguente

/* COMMENTO */

tra le slash e l'asterisco possiamo mettere l'espressione che più ci serve. Se ci sono due file CSS come in questo caso si incollano nel modello uno di seguito all'altro magari divisi da un commento. 

Oltre ai file CSS ci sono anche quelli javascript che si riconoscono per l'estensione .js. Nel Menù preso in esame ce n'è uno soltanto di cui è stato incollato l'URL

<script src='  .... /ddlevelsmenu.js' type='text/javascript'></script>

Per semplicità ho tralasciato i commenti dei crediti di attribuzione dell'autore. I javascript che fossero hostati su siti che diano grande affidabilità come per esempio JQuery, MooTools, Prototype, Scriptaculous o altri simili di cui si può ottenere il link nelle API di Google, vanno lasciati così come sono ma gli altri possono anche essere caricati direttamente nel modello.

Dopo aver aperto il file con Notepad++ si aggiungono all'inizio e alla fine del codice le righe seguenti

<script type='text/javascript'>
//<![CDATA[
 CODICE DEL JAVASCRIPT
//]]>
</script>

Nello screenshot vengono mostrate solo le righe iniziali ma devono essere incollate anche quelle finali

javascript-nel-modello-blogger

Si va quindi sul destro del mouse, si sceglie Seleziona tutto quindi Copia. Tutto il codice così copiato va incollato nel modello subito sopra alla riga </head> dopo aver cancellato la riga mostrata in precedenza che invece rimandava a un hosting esterno.

COME INSERIRE IL CODICE HTML SOPRA L'INTESTAZIONE

Le voci principali e secondarie di un menù vengono inserite in un codice HTML che poi va incollato nel punto preciso in cui si vuole visualizzare il menù. Il codice richiama le classi di stile dichiarate nei CSS e, facendo sempre riferimento al Matt Black Menù, se ne può vedere un esempio in questa pagina.

In genere viene postato andando su Layout > Aggiungi un gadget > HTML/Javascript per poi posizionarlo con il trascinamento del mouse. Per poterlo mettere sopra all'header del blog occorre sbloccare il relativo elemento pagina per visualizzare Aggiungi un gadget anche sopra alla Intestazione.
Anche facendo questa operazione spesso il menù non si visualizza correttamente perché gli elenchi che sono stati inseriti rispondono alle classi di stile dell'Header e non a quelle del menù. Si può ovviare a questo inconveniente incollando tutto il codice direttamente nel template.

Per avere il menù sopra alla Intestazione si deve cercare la riga

<div class='region-inner header-inner'>

e incollare tutto l'HTML subito sopra. Dopo tutte queste operazioni va finalmente salvato il template anche se consiglio di farlo più volte dopo ogni passaggio. Alternativamente a questo posizionamento il codice può essere incollato subito sotto la riga

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

nel caso si volesse esteso per tutta la lunghezza del layout. Visto che il modello di Blogger è in XML alcuni caratteri potrebbero non essere consentiti ed è meglio evitare gli apostrofi. Se proprio non se ne può fare a meno allora si deve provvedere a una conversione dei caratteri utilizzando questo strumento. Per esempio il simbolo & dovrà essere convertito in &amp;.

Anche con questo codice è opportuno inserire un commento all'inizio e uno alla fine per essere poi sicuri di ritrovarlo facilmente. La struttura dei commenti nell'HTML è la seguente

<!-- COMMENTO -->

Seguendo questa procedura avremo quindi installato tutto il menù direttamente nel template e non avremo quindi problemi di larghezza di banda di DropBox o di improvvise lentezze nel caricamento di file esterniCon questo sistema si può ovviare a queste problematiche ma altre rimangono intatte come quella del non funzionamento con tutti i browser. Per restare in tema il Matt Black Menù è visibile con IE, Firefox, Chrome e Safari ma dà dei problemi con Opera.




10 commenti :

  1. Ciao Ernesto, come consigliatomi, sto procedendo a incorporare il mattblackmenù dopo essere passato a dominio personalizzato e volevo chiederti se delle 4 righe di codice da inglobare nello js, le prime 2 vanno all'inizio e le altre 2 alla fine o tutte e 4 sia all'inizio che alla fine?
    te lo chiedo perché nell'anteprima del modello mi esce l'avviso seguente:
    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto. (minore)br/(maggiore) Messaggio di errore XML: The element type -head- must be terminated by the matching end-tag (segno minore)/head(segno maggiore).

    Mi è venuto anche un dubbio sulla dicitura relativa al CODICE JAVASCRIPT, va riportata così o sostituita con qualche codice personalizzato?
    Grazie infinite per la pazienza!

    RispondiElimina
  2. Scusa Ernesto rettifico, era chiaro che il codice si riferisse al contenuto del file js, quindi ho proceduto con l'inserimento delle righe prima e dopo il codice come hai indicato, anche se purtroppo continua a uscirmi l'avviso che ti dicevo sul tag di chiusura, cosa c'è che non va secondo te?

    RispondiElimina
    Risposte
    1. @ViviTaranto
      Se per te è troppo complicata questa procedura utilizza quella classica caricando i file su Dropbox
      http://www.ideepercomputeredinternet.com/2011/02/menu-orizzontale-su-piu-livelli-per.html

      Elimina
    2. sto facendo delle prove e credo dipenda dal codice che c'era prima quando i file erano esterni

      (minore)!--MattBlackMenù Inizio--(maggiore)
      (minore)link href=' .... /ddlevelsmenu-base.css' rel='stylesheet' type='text/css'/(maggiore)
      (minore)link href=' .... /ddlevelsmenu-topbar.css' rel='stylesheet' type='text/css'/(maggiore)
      (minore)script src=' .... /ddlevelsmenu.js' type='text/javascript'>
      /***********************************************
      * All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
      * This notice MUST stay intact for legal use
      * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
      ***********************************************/
      (minore)/script(maggiore)
      (minore)noscript(maggiore) (minore)a href='http://goo.gl/QaxXO' target='_blank'(maggiore)Inserisci Menù</a(maggiore) (minore)/noscript(maggiore)
      (minore)!--MattBlackMenù Fine - www.ideepercomputeredinternet.com--(maggiore)

      Forse non vanno cancellate solo le prime righe relative ai file css e jv, ma tutto il codice?

      Elimina
    3. @ViviTaranto
      Sì può cancellare tutto il codice però bisogna stare attenti alla differenza tra script e css. I secondi vanno incollati così come sono mentre i primi vanno incollati nel mezzo ad altre 4 righe anche se sembrano tre. Ora faccio un aggiornamento

      Elimina
  3. Ciao trovo molto interessanti tutti i tuoi articoli per menù e mi dispiace non riuscire ad usufruirne, la maggior parte delle volte questo avviene perchè inserendo il menù sotto l'intestazione dove vorrei inserirlo, va in conflitto con lo sfondo delle schede, perchè come ben saprai, inserendo un'elenco link o un Top Menù direttamente sotto l'eader diventa un menu a tutti gli effetti(ovviamente non multilivello).
    Per questo ti chiedo in tutta ignoranza, non è possibile modificare direttamente il menù preimpostato di blogger, oppure creare un'elenco link che habbia queste caratteristiche?

    Non so davvero come risolvere perchè vorrei tanto un menù multilivello.

    Ps: avvisami se non mi sono spiegato bene

    RispondiElimina
    Risposte
    1. @ montegiordano
      Non è possibile trasformare il menù di Blogger in più livelli

      Elimina
  4. ciao, avrei aperto un blog su blogger, è personalizzabile il menu o devo rinuciarvi? nel caso mi sapresti dire da quale tutorial sul tuo blog partire? grazie

    RispondiElimina
    Risposte
    1. Intendi personalizzare il menù nativo di Blogger, quello delle pagine statiche? Se la risposta è positiva leggi questo post
      http://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html
      Vuoi creare une menù tuo di sana pianta? In questo secondo caso puoi sceglierne uno tra questi
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.