Gestire le etichette in Blogger: come creare un menù verticale.

nuvola etichetteCi 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
etichette blogger widget
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
aspetto widget etichette
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
etichette blogger widget[4]
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
menu etichette widget blogger
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.
 
Ricerca personalizzata

 

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:


Commenti

nome-foto