Menù a tendina verticale colorato con le etichette di Blogger.

Dopo aver presentato il menù verticale con le etichette, mi è stato chiesto se fosse possibile personalizzarne l'aspetto per renderlo più intonato ai colori del blog. 

La cosa è fattibilissima e, per maggiore chiarezza, ripercorrerò tutte le tappe della creazione di questo menù. 

In sostanza si tratta di trasformare il widget delle Etichette di Blogger in un menù a tendina. Se avete già installato il gadget andate al passaggio successivo, se invece ancora non lo avete messo sul blog, cliccate su Design > Aggiungi un gadget > Etichette

Nella finestra successiva date un nome univoco al widget in modo da non confonderlo con un altro che potreste avere nel modello

Nella prova che ho fatto l'ho chiamato Menu Etichette. Cliccate su Salva. Se adesso aprite il blog, vedrete un elenco più o meno lungo di tutte le etichette che avete aggiunto nei post. L'obiettivo è di far diventare questo elenco un menù a tendina simile a questo

I colori come vedremo possono essere personalizzati. Si può anche vedere online una demo del menù verticale a tendina con etichette. Adesso dovete andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Non si devono espandere i modelli widget. Cliccando su F3 o Ctrl+F si cerca una riga simile a questa

 <b:widget id='Label1' locked='false' title='Menu Etichette' type='Label'/>
dove il numero d'ordine e il titolo del widget potranno anche essere diversi.

 Si cancella detta linea e si sostituisce con il seguente codice

<b:widget id='Label3' locked='false' title='Menu Etichette' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select class='menu-etichette' onchange='location=this.options[this.selectedIndex].value;'>
<option>Scegli 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/PjyA8' target='_blank'>Get Widget</a>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Per il numero del widget e il suo titolo dovete sostituire quelli presenti nel vostro template. L'espressione Scegli etichetta sarà la prima voce del menù e può essere sostituita con un'altra. Evitate per quanto possibile parole accentate e soprattutto apostrofi che possono essere interpretati come HTML. Adesso cercate la riga

]]></b:skin>

e, immediatamente sopra, incollate questo CSS

.menu-etichette {
width:100%; /* Larghezza del menu */
background-color: #FDBCB7; /* Colore dello sfondo */
color: #003366; /* Colore del testo */
}

Il significato dei parametri è illustrato a fianco di ciascuno di essi. Possono essere modificati per dare al menù delle etichette gli stessi colori del blog. La larghezza 100% significa che il menù prende tutto lo spazio disponibile nella sidebar. Se invece si inserisse in un altro punto del layout più ampio, come per esempio sopra all'area del post, potremo diminuire la percentuale. Alternativamente si può anche inserire la dimensione in pixel ( Es: width:300px; ). Finalmente si salva il modello e si guarda che aspetto ha il menù. Chi avesse delle difficoltà con gli altri parametri, può consultare i post sui codici dei colori e sui software PF Color Tool e Color Picker per acquisire il codice dei colori visibili sullo schermo del computer. Ad ogni voce del menù, corrisponderà una pagina di questo genere

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

Aggiornamento: Se si vogliono eliminare i numeri tra parentesi che indicano il numero di post per ogni etichetta per avere un menù che abbia questo aspetto

basta eliminare la riga (<data:label.count/>). Si possono mettere i numeri anche tra parentesi quadre sostituendola con quest'altra [<data:label.count/>] o ancora inserire al suo posto questa riga [<data:label.count/> post] per avere un effetto di questo genere

Naturalmente ci si può sbizzarrire come si vuole inserendo anche altre espressioni o anche delle icone.