Come ti personalizzo il blog (2)...

Creare menù a discesa per etichette post

E per la serie come personalizzare il blog, ho modificato il widget delle etichette per far sì che creasse un semplice menù a discesa riepilogativo, evitando che la sidebar assumesse dimensioni proibitive!

Questo è il 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 class='sidebar_select' name='select_etichette' onChange='document.location.replace(this.value);'>
<b:if cond='data:blog.url == "http://tommity.blogspot.com"'>
 <option selected='selected' value='http://tommity.blogspot.com'>Tutto</option>
<b:else/>
<option value='http://tommity.blogspot.com'>Tutto</option>
</b:if>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
 <option expr:value='data:label.url' selected='selected'><data:label.name/> (<data:label.count/>)</option>
<b:else/>
 <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:if>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sfruttando i tag <b:if> e <b:loop> costruisco un menu a tendina, usando il tag html <select>.
La sintassi del tag <select> è molto semplice, gli attributi degni di nota sono: class che permette di applicare uno stile css e onChange che permette di eseguire un comando ogni volta che viene selezionata una voce diversa dal menù a discesa. Il comando che viene eseguito è scritto in javascript ed è: document.location.replace(this.value), questo permette di reindirizzare il browser verso il link riportato nell'attributo value dei tag <option>.

I due <b:if> permettono di evidenziare la voce selezionata dopo che è stata ricaricata la pagina, grazie all'aggiunta dell'attributo selected="selected" nel tag <option>.

Il <b:loop> esegue un ciclo sulle etichette utilizzate nel blog, permette di elencarle e quindi di compilare il menù a tendina.

La guida ufficiale per i comandi widget la trovate qui, mentre l'elenco delle variabili che si possono utilizzare all'interno dei widget lo trovate qui.

Tornando all'attributo class del tag <select> per poter personalizzare l'aspetto del menù, si deve aggiungere all'interno dei tag <style> una classe ad hoc, tipo questa:

.sidebar_select{
background-color: #EEEEEE;
color: #6699CC;
font: 11px Verdana;
}

Questo è quanto, il risultato è visibile qui accanto! ——>
Spero possa esservi utile,
ciao!
Andrea