Menù verticale a tendina con le etichette di Blogger

Le etichette che andiamo ad inserire in ogni post in maniera accurata si possono valorizzare, come abbiamo visto in precedenza, attraverso un elenco di etichette da inserire come gadget su un blog di Blogger. In realtà non è che sia tutto questo splendore il widget offerto da Blogger sia nel colore sia nel formato che occupa molto spazio soprattutto se le etichette che si vogliono inserire sono parecchie. Con un po' di impegno e con un pizzico di esperienza su Blogger è possibile trasformare il semplice elenco delle etichette in un menù verticale a tendina che occupa pochissimo spazio dato che solo dopo essere stato cliccato farà apparire le etichette contenute al suo interno.

Per creare un menù verticale a tendina dovete per prima cosa andare nel Modello e cercare attraverso la casella di ricerca del modello che appare premendo i tasti Ctrl+F il seguente termine:

Label1

Lo dovreste trovare all'interno di una riga di codice molto simile a questa:

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

Come da immagine, adesso dovete selezionare tutta la riga in cui è presente il termine Label1 (compresa tra <b:widget e </b:widget> e sostituirla con quest'altro codice:

<b:widget id='Label1' locked='false' title='Etichette' 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 per categoria</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sostituendo correttamente i codici e salvando il modello l'elenco delle etichette diventerà un menù a tendina dove è presente la scritta Seleziona per categoria che può essere sostituita editando la scritta in rosso del codice soprastante.

Se volete nascondere il numero dei post per ogni etichetta dovete eliminare la seguente riga (<data:label.count/>) dal codice soprastante.

Per chi volesse dare un po' di colore al menù a tendina deve prima cercare nel modello la seguente riga 

]]></b:skin> 

e poi incollare prima di essa questo codice css:

.Etichette {width:100%;  background-color: #3FBA4E; color: #413FBA;}

Width = determina la larghezza del menù.
Background-color = determina il colore dello sfondo.
Color = determina il colore del testo (etichette).

Le personalizzazioni possono essere fatte sostituendo i colori esadecimali predefiniti con altri differenti reperibili attraverso un generatore di colori esadecimali online.

Per la sidebar, come alternativa al menù a tendina, potete usare il menù espandibile.