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

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

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 esterni. Con 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.