CREARE BLOG > Modificare la barra dei menu orizzontale
PERSONALIZZARE I MENU ORIZZONTALI
Alcuni template sono dotati di una utilissima barra orizzontale,
dalla quale puoi permettere ai tuoi visitatori di avere un accessso rapido ad
alcune pagine del tuo blog.Per il proseguo della lezione, ho scelto come template, "Revolution Church"
Clicca sul suo nome per accedere alla pagina e scaricare il modello.
Oppure, scaricalo da qui.
Questo modello ha una doppia barra orizzontale dotata di menu a discesa a più livelli.
La gestione non è delle più facili, ma il risultato è molto professionale.
SALVA UNA COPIA DEL MODELLO
Come ho scritto all'inizio della lezione precedente, ti ricordo di salvare sempre una copia del modello attuale prima di modificarlo.Per eseguire tale operazione,
Clicca su "Scarica modello completo" e in seguito, clicca sul pulsante "Salva" dalla finestra di dialogo apertasi.
MODIFICARE IL CODICE
Per poter personalizzare la barra dovrai ora "mettere mano" al codice.Nulla di trascedentale, ma occorre un minimo di pazienza e di concentrazione.
DOVE MODIFICARE IL CODICE
Il codice del templtate lo puoi modificare direttamente nel browser,- dalla scheda "Modello" clicca su "Modifica HTML".
Ma non è la soluzione ottimale.
Mi permetto quindi di consigliarti di utilizzare un programma apposito per la gestione del codice: HTML-Kit oppure SciTE.
Puoi scaricare l'ultima versione di SciTE qui: scite.en.softonic.com oppure lo stesso programma lo puoi trovare già nel pacchetto winpenpack da 2GB che puoi scaricare seguendo questa lezione: Winpenpack.
COPIARE ED INCOLLARE VELOCEMENTE
Per lavorare il codice sul programma (SciTE in questo caso),1 - dal pannello di controllo del tuo blog,
Se hai attiva la nuova interfaccia di Blogger,
1a - clicca sulla scheda "Modello" clicca su "Modifica HTML", clicca su "Procedi".
Se hai attiva la vecchia interfaccia di Blogger,
1b - clicca su "Design", clicca su "Modifica HTML"
2b - clicca sulla casella di controllo "Espandi i modelli widget"; ovvero spuntala.
3 - clicca all'interno del riquadro del codice
4 - da tastiera premi i tasti [CTRL] + [A] (viene selezionato così tutto il codice)
5 - premi i tasti [CTRL] + [C] (viene copiato il codice)
6 - apri il programma SciTE
7 - se necessario apri una pagina nuova (File > Nuovo)
8 - premi i tasti [CTRL] + [V] (viene incollato il codice).
TROVARE VELOCEMENTE LA PARTE DI CODICE
Per trovare il codice relativo alla barra orizzontale (la parte che ti interessa modificare),1 - premi i tasti [CTRL] + [F] (viene attivato il comando trova)
2 - digita una voce esistente del menu: sample ad esempio
3 - premi [INVIO] ed in seguito [F3] se necessario, fino ad individuare il codice del menu.
IL CODICE DEL MENU
Questo che segue è il codice della prima barra orizzontale (del modello Revolution Church) :
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Sample Page</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div>
CAMBIARE I NOMI DEL MENU
Per cambiare il nome del secondo menu (il menu Home lascialo così com'è!)1 - sostituisci la parola Sample Page con quella da te scelta (ad esempio Fotografie)
Quindi la riga di codice:
<a href='#'>Sample Page</a>
<a href='#'>Fotografie</a>
Potrai modificare in questo modo, tutti i nomi dei menu che si trovano tra
<a href='#'> e </a>
INSERIRE I LINK
Cliccando sulle voce dei menu non appare nessuna nuova pagina !Per collegare le voci dei menu ai link (affinchè cliccando si apra la pagina collegata),
1 - sostituisci il simbolo # a fianco della voce di menu con il link desiderato.
Se vuoi ad esempio aprire un post/articolo specifico del tuo blog,
1 - posiziona il puntatore sopra il titolo del post
2 - clicca con il tasto destro e dal menu contestuale clicca sulla voce "Copia indirizzo"
3 - seleziona il simbolo # e premi i tasti [CTRL] + [V] (per incollare il link)
In questo modo, la riga di codice del menu si presenterà ad esempio, così:
<a href='http://blogdazero.blogspot.com/le-mie-foto.html'>Fotografie</a>
RICOPIARE IL TEMPLATE SUL BLOG
Dopo aver eseguito tutte le modifiche necessarie, per trasferire il codice sul tuo blog,1 - dalla pagina di SciTE premi i tasti [CTRL] + [A] (viene selezionato così tutto il codice)
2 - premi i tasti [CTRL] + [C] (per copiare il codice)
3 - dal pannello di controllo del tuo blog,
Se hai attiva la nuova interfaccia di Blogger,
3a - clicca sulla scheda "Modello" clicca su "Modifica HTML", clicca su "Procedi".
Se hai attiva la vecchia interfaccia di Blogger,
3b - clicca su "Design", clicca su "Modifica HTML"
4b - clicca sulla casella di controllo "Espandi i modelli widget"; ovvero, spuntala
5 - clicca all'interno del riquadro del codice e premi i tasti [CTRL] + [A]
6 - premi i tasti [CTRL] + [V] (per incollare il codice)
7 - clicca sul pulsante in basso a destra "Salva Modello".
Clicca su "Visualizza blog" per testarne il risultato.
Nella prossima lezione vedrai come eliminare ed aggiungere nuove voci ai menu