Come aggiungere link al widget delle pagine statiche per creare un menù.

In Blogger, dopo l'introduzione delle pagine statiche, si può creare un menù orizzontale formato proprio da tutte quelle pagine che sono state pubblicate e che possono arrivare fino a dieci. Il menù che si viene a creare può essere inserito in senso orizzontale sotto l'intestazione o in senso verticale in una sidebar. C'è anche la possibilità di non associare alcun widget alle pagine statiche che è stata la scelta di questo blog. Blogger non dà nativamente la possibilità di inserire dei collegamenti a degli URL che non siano di pagine statiche di quello stesso blog.

Vediamo come sia possibile ovviare a questo problema e di come si possa creare un menù orizzontale molto efficiente e semplice da realizzare. Per prima cosa dobbiamo aver pubblicato almeno una pagina statica e averla salvata nel widget orizzontale. Andiamo adesso su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget cerchiamo questo codice

<b:widget id='PageList1' locked='false' title='Pagine' type='PageList'>
<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'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>

Immettere l'elenco delle voci del menù

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

Il widget non è altro che un elenco che inizia con <ul> e termina con </ul>. Possiamo sfruttare questa cosa per inserire prima della sua fine altre voci che ci interessano con questa sintassi

<li><a href="LINK COLLEGAMENTO">TESTO</a></li>

Per fare un esempio pratico ecco come potrebbe diventare il precedente codice

<b:widget id='PageList1' locked='false' title='Pagine' type='PageList'>
<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'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
<li><a href='http://www.ideepercomputeredinternet.com/'>Home</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/blogger'>Blogger</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/immagini'>Immagini</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/template'>Modelli</a></li>
<li><a href='http://www.ideepercomputeredinternet.com/search/label/giochi'>Giochi</a></li>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

dove le righe aggiunte sono colorate di rosso. Salvate il modello. Sono adesso possibili ulteriori interessanti personalizzazioni. Andate su Design > Elementi pagina > Pagine > Modifica. Dovete cioè aprire il widget delle pagine statiche

La finestra di configurazione ci darà la possibilità di non mostrare le pagine statiche e di visualizzare solo il nostro semplice menù

Possiamo farlo agevolmente togliendo il segno di spunta dai rispettivi quadratini. Quando abbiamo terminato clicchiamo su Salva. Il menù avrà i colori del nostro blog

che potranno però essere modificati andando su Design > Designer modelli > Avanzato > Testo schede. Si seleziona un colore tra quelli previsti dal modello oppure se ne immette un altro ottenuto dai codici dei colori; si termina andando su Applica al blog in alto a destra.

• Demo del menù orizzontale con widget delle pagine statiche -

Concludo dicendo che questo menù potrebbe essere usato per evidenziare le categorie più importanti del blog inserendo degli URL del tipo

http://www.nomesito.blogspot.com/search/label/nome-etichetta