Come creare un menù con Blogger senza usare codice HTML.

Come creare un menù per Blogger senza usare codice HTML, CSS o javascript.

In questo blog mi sono spesso occupato di menù per Blogger presentandone di tutti i tipi. Ho anche fatto una raccolta dei post con i migliori menù. Le esigenze in questo campo sono molto diverse. Ci sono coloro che preferiscono la semplicità e altri che invece amano menù molto sofisticati. Anche dal punto di vista grafico c'è chi preferisce un aspetto asciutto e chi invece ama effetti slide e personalizzazioni.

Con questo articolo voglio andare incontro a chi vuole creare un menù per il suo blog su Blogger ma che sia completamente digiuno di codice HTML. Fra i vari gadget ufficiali di Blogger c'è quello chiamato Elenco di link che ha la particolarità di configurarsi in verticale se inserito nelle sidebar e di mostrarsi invece in orizzontale se posizionato nella parte alta del layout subito sotto l'header.

Occorre quindi andare su Layout > Aggiungi un gadget > Elenco di link

Nella finestra successiva createvi il vostro menù incollando la voce che volete visualizzare insieme all'URL corrispondente. Potete scegliere delle pagine interne del blog come per esempio About o Privacy che riportano a post in cui illustrate le caratteristiche del sito e le norme sulla privacy. Si possono  anche usare pagine statiche dello stesso sito che potrebbero essere delle gallerie di foto o di video. E' però anche possibile inserire dei collegamenti esterni al sito come per esempio la Pagina Fan su Facebook, la Pagina Business su Google Plus, il nostro account Twitter o altro ancora.

Le voci così inserite possono essere ordinate in ordine alfabetico, in ordine alfabetico inverso oppure manualmente andando in basso e spostandole mediante le apposite frecce 

 

 

Il titolo del menù può essere lasciato vuoto così come il numero dei link da mostrare nell'elenco per visualizzarli tutti. Per inserire un nuovo elemento si va su URL nuovo sito e si incolla l'indirizzo, In Nome nuovo sito si digita la parola che si vuole visualizzare nel menù. Si va su Aggiungi link per terminare l'inserimento. In basso a sinistra saranno visibili i link che sono stati inseriti e che possono essere ordinati andando sulle frecce poste alla destra di ciascuno. Si clicca su Salva e si posiziona l'Elenco di link subito sotto l'Header del blog

Se adesso aprite il blog avrete il vostro menù perfettamente funzionante. Se poi non siete ancora soddisfatti e volete procedere alla personalizzazione dell'aspetto utilizzando un po' di CSS procedete nel modo seguente. Anzitutto dovete acquisire l'ID del widget che dovrebbe essere LinkLIst1 ma potrebbe anche essere LinkList2 se si tratta del secondo elenco di link che avete inserito nel blog. Per verificarlo aprite il widget e visualizzatene l'indirizzo. L'ID del widget sarà visibile alla fine dell'URL

e questa cosa vale per tutti i gadget di Blogger. Andate adesso su Modello > Modifica HTML > Procedi e cercate la riga ]]></b:skin> cliccando su F3 o su Ctrl+F. Subito sopra incollate un codice come questo

#LinkList1 {
background-color:#FDBCB7 !important;
}
#LinkList1 a:link {
text-decoration:none;
color:#003366 !important;
}
#LinkList1 a:visited {
text-decoration:none;
color:#D84931 !important;
}
#LinkList1 a:hover {
background-color:#940F04 !important;
text-decoration:none;
color:#FFFFFF !important;
}

dove al posto di LinkList1 ci potrebbe essere LinkList2 e dove i codici dei colori possono essere personalizzati a piacere. I blocchi di codice con a:visited e a:hover si riferiscono rispettivamente all'aspetto del menù per i link già visitati e per quelli puntati con il mouse

Si va su Salva modello per rendere effettive le modifiche. Concludo insegnandovi anche un trucco per far aprire i collegamenti del menù in un altra scheda del browser. Ritornate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate con F3 o Ctrl+F il widget LinkList1. Avrà un codice simile a quello riportato qui sotto

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' 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>

In tale codice è stata evidenziata di rosso la riga

<a expr:href='data:link.target'>


che dovrà essere sostituita da quest'altra


<a expr:href='data:link.target' target='_blank'>


in modo da aggiungere il tag target='_blank' che serve proprio per aprire i link in un'altra scheda del browser. Ecco il relativo screenshot




Si va nuovamente su Salva modello e tutti i link del menù si apriranno in un'altra scheda. Concludo ricordando che si può anche creare un menù utilizzando il widget delle pagine statiche.