Come creare un menù verticale con tutte le etichette in un blog su Blogger.

Ci sono diversi modi per visualizzare le etichette in un blog su Blogger. Ricordo il classico elenco verticale e la nuvola di etichette, entrambi offerti dalla piattaforma. C'è anche il widget Blogumus che è le mostra animate e che si muovono al passaggio del mouse ma che ha il difetto di non funzionare con tutti i modelli. In un singolo blog possiamo inserire anche più di un widget di etichette. In questo caso i gadget saranno univocamente individuati dal loro numero di ordine (Labels1, Labels2, ecc). Vediamo come realizzare un menù verticale con tutte le etichette presenti nel nostro blog e che mostri anche il numero di articoli in cui ciascuna di essa sia stata inserita. Per prima cosa bisogna aver installato il widget andando su Design > Aggiungi un gadget > Etichette

 

Per essere sicuri di non fare confusione nel caso fosse presente un altro widget simile, diamogli un nome inequivoco come per esempio Etichette Menu. Clicchiamo su Salva e posizioniamo il widget dove più ci pare nella sidebar. Avrà l'aspetto classico dell'elenco verticale

Adesso andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Non bisogna espandere i modelli widget, quindi dobbiamo togliere la flag dal quadratino nel caso fosse presente. Cerchiamo questa linea di codice

<b:widget id='Label1' locked='false' title='Etichette menu' type='Label'/>

dove il numero d'ordine e il titolo evidenziati di rosso possono essere diversi

Sostituiamo tale linea con questo codice

<b:widget id='Label1' locked='false' title='Etichette Menu' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Seleziona etichetta</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<div style="font-size:60%;text-align:right;"><a href='http://goo.gl/3eMoz' target='_blank'>Get Widget</a></div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

in cui per i dati in rosso valgono le considerazioni fatte sopra e la frase in blu rappresenta quello che sarà visto nella prima riga del menu. Si salva il modello. Il widget sarà formato da una sola riga. Se si cliccherà nel campo Seleziona etichetta si aprirà il menù verticale

Cliccando su un singolo elemento apriremo una pagina del tipo

http://nome-blog.blogspot.com/search/label/nome-etichetta

Questa personalizzazione è molto utile per chi ha nel blog molte etichette e vuole mostrarle ai visitatori in modo compatto. Una demo del funzionamento di questo gadget la potete vedere in alto a destra di questo post di prova.