Blogger: modifica e personalizzazione del menu

Per costruire un blog personale sul CMS Blogger basta un po' di pazienza.
Non occorre conoscere alcuna nozione di HTML.
Non così immediata è, invece, la creazione di un menu articolato in pagine, sottopagine, categorie, ecc.
Il procedimento è, tuttavia, più semplice di quanto possa sembrare.
Occorre soltanto avere qualche piccola infarinatura di linguaggio HTML.
Quelle che seguono sono alcune indicazioni, senza alcuna pretesa di completezza, per chi, come me, non è un tecnico informatico.

Per ogni Blog... ci vuole un tema

Per ogni blog occorre, ovviamente, un “tema” (o “modello” o “template”) che organizzi e presenti in modo organizzato le proprie idee.
I temi “ufficiali” proposti dal sistema sono, in genere, molto semplici ma funzionano bene per fare le prime esperienze di blogging e familiarizzare con il sistema.

Fig. 1 - Alcuni temi ufficiali di Blogger

Tuttavia dopo un primo periodo di rodaggio si sente la necessità di cercare modelli un po' più elaborati, magari con un menu personalizzato.
Di modelli ne esistono migliaia, sia gratuiti che a pagamento. Spesso vengono pubblicati con menu "di default" che devono necessariamente essere modificati per adattarsi ai siti reali.

Come funziona altrove?

Blogger, ovviamente, non è l'unica piattaforma di creazione di blog.
Anzi non è neppure la più diffusa piattaforma per il blogging.
Le statistiche affermano che la maggioranza dei blog nel mondo poggia su piattaforma WordPress.
Effettivamente l'ambiente WordPress è molto potente, molto più potente di Blogger, ed offre, tra le infinite funzioni, anche quella di creazione assistita di menu con un sistema di moduli grafici.

Fig. 2 - Strumento di creazione menu in Wordpress

Per chi ha dimestichezza con WordPress potrebbe essere, quindi, problematica l'assenza in Blogger di una sezione dedicata alla costruzione modulare del menu del proprio sito.

Il meno è il più... a volte

Per un po' di tempo sono rimasto bloccato da questa mancanza.
Poi ho capito come gestire i menu attraverso un minimo di conoscenza del codice HTML e tutto è diventato molto semplice e immediato.
Direi anche più semplice e veloce dell'utilizzo del sistema assistito sopra descritto.
Non sempre una carenza costituisce una limitazione.
Ecco, quindi, i passaggi per personalizzare i menu dei temi di Blogger.

Iniziamo creando le pagine

Per creare una voce di menu collegata ad una pagina occorre, prima, creare la pagina dal menu di Blogger.

Fig. 3 - Creazione di pagina fissa in Blogger

Un volta creata la pagina occorre identificare il frammento del codice HTML che contiene l'elenco di default del menu.
Per identificare il codice della pagina è facilissimo: basta visualizzare la pagina e leggere l'indirizzo nel campo degli indirizzi del browser (in genere nella parte superiore del navigatore).

Come si cerca la parte di codice da modificare?

In primo luogo andare nell'elenco delle funzioni di gestione del proprio blog, quello con le voci: Panoramica, Post, Pagine... (si vede l'inizio dell'elenco alla Fig. 3) e selezionare la voce MODELLO (si trova verso il fondo dell'elenco) e, poi, MODIFICA HTML.
Adesso arriva la parte più creativa: occorre procedere tenendo conto del menu predisposto dal produttore.
In genere basta partire dalle voci di menu preimpostate e cercare la relativa stringa di codice all'interno della versione HTML del modello con CTRL-F.
Nei modelli più recenti (ovvero scritti in HTML5) la parte contenente il menu è contenuta nei tag <nav> (ovvero uno dei NUOVI TAG introdotti con la versione 5 del linguaggio HTML, peraltro ancora in attesa di standardizzazione ufficiale).
Una volta trovata, occorre togliere, aggiungere e modificare le voci già presenti all'interno dei tag <ul>...</ul> e, per ogni singola voce di menu, nei rispettivi tag <li>...</li> fino ad arrivare alla struttura desiderata.
Se si vogliono inserire sottomenu basta annidare una ulteriore serie di tag <ul>...</ul> con le rispettive voci interne.

Inserimento dei collegamenti nelle voci

A questo punto occorre inserire il collegamento alle pagine nella parte relativa all'url copiando e incollando l'indirizzo descritto nel paragrafo dedicato alla creazione delle pagine di cui sopra.
L'indirizzo va inserito all'interno delle virgolette nel punto denominato href=''
Se, invece, si volesse creare una voce di menu di categorie (anche definite etichette o tag) assegnate ai post occorre modificare l'indirizzo come segue: sostituire la parte dell'indirizzo /p/... con /search/label/nome_etichetta.
È anche possibile inserire voci di collegamento prive di contenuto, da utilizzare come voci intermedie per altre sottovoci: basta non inserire alcun indirizzo nel punto href=''.

Esempi di menu

Di seguito due esempi di menu in HTML (in cui nome_blog corrisponde, in concreto, al proprio url).

Menu di sole pagine fisse

Nel primo esempio si notano pagine fisse:HOME, PRESENTAZIONE, CONTATTI.

<nav>
<ul>
<li><a href='/'>HOME</a></li>
<li>href='http://nome_blog.blogspot.it/p/presentazione.html'>PRESENTAZIONE</a>
</li>
<li><a href='http://nome_blog.blogspot.it/p/contatti.html'>CONTATTI</a></li>
</ul>
</nav>

Menu con una voce di collegamento e due sottovoci filtrate

La voce di collegamento è ARGOMENTI.
Le sottovoci filtrate sono LINUX, ANDROID

<ul>
<li><a href=''>ARGOMENTI</a>
 <ul>
<li><a href='http://nome_blog.blogspot.it/search/label/Linux'>LINUX</a></li>
<li><a href='http://nome_blog.blogspot.it/search/label/Android'>ANDROID</a></li>
</ul>
</ul>

Questo post è replicato su piattaforma MEDIUM