PC da ZERO . it - Guida facile per usare il computer

PERSONALIZZARE LE BARRE 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.
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 sotto la voce modifica modello.


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, clicca su Layout, clicca su "Modifica HTML"
2 - 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>
verrà modificata così:
<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, clicca su Layout, clicca su "Modifica HTML"
4 - 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