Menù verticale a tendina con le etichette di Blogger


creare un menù a tendina usando le etichette blogspot
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.



7 commenti :

  1. Mitico! Implementato anche questo su www.astediarte.it
    Grazie

    RispondiElimina
  2. Ciao. Mi piace molto il tuo blog. Ho cambiato template ^_^ e questa volta ho deciso di mettere uno più semplice. Ho già il menu a tendina incluso, l'unica cosa eh che non come inserire i link dentro! Ad esempio: tendina rubriche, vorrei inserire un link che rimanda a tutte le mie rubriche. tendi post/elenco vorrei inserire i link per rimandare alla pagina giusta, come s fa? grazie per la gentilezza e scusami del fastidio. :)

    RispondiElimina
    Risposte
    1. Ti riferisci al menù a tendina presente in questa guida o al tuo menù che hai messo in alto?
      Non so se ho capito bene ma per la sidebar puoi provare questo menù:
      http://www.scuolissima.com/2013/11/menu-espandibile-sidebar-blogger.html

      Il risultato è simile a quello che trovi a destra di questo blog di prova:
      http://prova-scuolissima.blogspot.it/

      Elimina
    2. Nel mio menu caro. Ho già un template con un menu incorporato, e volevo solo espandere le varie voci. Aia, hai capito adesso? :/ mi spiego sempre male. :(

      Elimina
    3. Se io clicco su "Rubrica" rimanda già alla tua raccolta di rubriche (cioè all'etichetta Rubriche), inoltre se poggio il mouse su "Rubrica" si aprono anche le cosiddette sottosezioni. Questo è il massimo che può fare questo tipo di menù.

      Quello invece con più sezioni è il seguente:
      http://www.scuolissima.com/2014/04/menu-orizzontale-multilivello-blogger.html

      Elimina
  3. Ciao, vorrei creare un menu con varie selezioni che riporti ai miei articoli es. Home page, 1, 2, 3 e in 1,2 e 3 far scendere una tendina con i titoli dei miei articoli. Come faccio? spero di essermi spiegata. Ti prego non mi rimandare ad altri articoli è mezz'ora che giro sul tuo blog! PS. ho fatto la ricerca con Ctrl+F e scritto "Label1" ma non mi dà nulla.

    RispondiElimina
    Risposte
    1. Non ho capito nulla, mandami un messaggio più dettagliato sulla pagina Facebook di Scuolissima, magari aggiungendo uno screenshot o linkando un blog di Blogger che già utilizza questa funzione.

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".