Gadget Elenco link blogger menu a tendina

Chi utilizza la piattaforma blogger per il propio blog blogspot conoscerà sicuramente il  Gadget widget "Elenco di link" che mostra una raccolta dei tuoi siti, blog o siti web preferiti per i tuoi visitatori. Questo gadget è molto utile ma, quando la lista di link inizia a diventare numerosa può iniziare a sembrare poco bella graficamente e un pò ingombrante. Per risolvere questo problema, in questo piccolo tutorial, vi spiego in modo semplice come trasformarlo in un menù a tendina o menù a comparsa così da raggruppare tutti i link

Come creare un menù a tendina di link in blogger ?


Entriamo in blogger e nell' elenco dei nostri blog clicchiamo su quello in cui vogliamo inserire il menù a tendina. Come prima cosa è sempre consigliabile fare un backup del nostro template andando in Modelllo e in alto a destra click su Backup/Ripristino e Scarica modello completo.

1 - Partiamo con il presupposto che abbiamo già inserito da tempo il gadget che ci permette di inserire un elenco di link ma, se ancora non l'abbiamo fatto andiamo in Layout / Aggiungi un Gadget e aggiungiamo Elenco di Link , quindi,  in Modello / Modifica HTML e cerchiamo il codice da modificare, dovrebbe essere simile a questo:

   <b:widget id='LinkList1' locked='false' title='Elenco di Link' type='LinkList'>
    <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
  </b:widget>

Per rendere più semplice la ricerca del codice basta cliccare sulla tastiera Ctrl e la lettera F per far comparire una casalla di ricerca in cui andremo a inserire una parte del codice da ricercare e Invio.
La parte in blu è il titolo che sarà quello che avrete inserito e, quindi, diverso e la parte in rosso è quella che andremo a modificare.

2 - Per ottenere un menù a tendina semplice sostituiamo la parte in rosso, del codice precente, con:

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<form class='link-form' target="_blank">
<select class='menu-link' onchange='location=this.options[this.selectedIndex].value;' >
<option class='link-title'>Seleziona sito</option>
<b:loop values='data:links' var='link'>
<option class='links-name' expr:value='data:link.target' ><data:link.name/></option></b:loop></select></form></div>
<br/><b:include name='quickedit'/>

La scritta in rosso di questo codice potrete sostituirla con quello che volete o lasciarla vuoto se volete, sarà il titolo iniziale del menù a tendina.
Il lato negativo di questo codice è che apre i link nella stessa finestra, anche inserendo target='_blank' le cose non cambiano. Esempio di come verrà:

Seleziona sito Link1 Link2 Link3 Link4 Link5

3 - Un altro codice che permette di aprire un link in un altra finestra è :

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<form  class='form-link'  target="_blank" name="menu">
<select class='menu-link' name="links" onchange="window.open(document.menu.links.options[document.menu.links.selectedIndex].value)" value="GO">
<option  value="#" class='link-title'>Seleziona sito</option>
<b:loop values='data:links' var='link'>
<option class='links-name' expr:value='data:link.target'><data:link.name/></option></b:loop></select></form></div>
<br/><b:include name='quickedit'/>

oppure più semplicemente:

 <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<form class='form-link' target='_blank'>
<select class='menu-link' onChange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option class='link-title' value="#">Seleziona sito</option>
<b:loop values='data:links' var='link'>
<option class='links-name' expr:value='data:link.target' ><data:link.name/></option></b:loop></select></form></div>
<br/><b:include name='quickedit'/>

Esempio del risultato che otterremo:

Seleziona sito Link1 Link2 Link3 Link4 Link5

Per questi ultimi due codici il risultato è lo stesso, potremo aprire i nostri link in una nuova finestra ma, come al solito, c'è un lato negativo, alcuni browser lo percepiscono come finestra pop-up e quindi lo bloccano se  è inserito l'eventuale blocco pop-up.

4 - Per avere link che si aprono in un altra finestra l' unico modo priva di problemi è :

<div class='widget-content'><form class='form-link'>
<select class='menu-link' name='menu'>
<option class='link-title' value='#'>Seleziona sito</option>
<b:loop values='data:links' var='link'>
<option class='links-name' expr:value='data:link.target'><data:link.name/></option></b:loop></select>
<input class='links-button' name='Submit' onClick='window.open(menu.value,"newtab")' type='button' value='Vai'/></form></div>
<br/><b:include name='quickedit'/>

Risultato che otteniamo:

Seleziona sito Link1 Link2 Link3 Link4 Link5

In poche parole aggiungiamo un pulsante al menù a tendina che reidirizza i link in una nuova finestra.

5 - Dopo aver inserito il menù a tendina che preferiamo, se vogliamo possiamo modificare il suo aspetto nei limiti del css. Cerchiamo </b:skin> e poco sopra inseriamo le classi per modificarlo. Esempio:

.form-link {background-color: #CD853F; padding:10px;}
.menu-link {color: #FF0000;background-color: #FFC0CB;}
.link-title {color: #000;}
.links-name {color: #0000CD;}
.links-button {color: #fff;background-color: #00BFFF;}

Seleziona sito Link1 Link2 Link3 Link4 Link5

Per chi non sà nulla di css ho usato colori diversi per identificare le varie classi e capire meglio come modificarlo secondo le vostre esigenze. Nei vari codici proposti tramite css potete modificare:
.form-link (sfondo marrone chiaro)
.menu-link (sfondo rosa menù, link titolo rosso)
.link-title (colore titolo nero)
.links-name (colore blu)
.links-button (colore testo pulsante bianco, colore pulsante celeste)


Se siete a conoscenza di altri sitemi per creare menù a tendi per il widget Elenco di link non esitate a condividerlo lasciando un commento.