CREARE BLOG > Creare un menu a tendina con un apposito template
I 3 Manuali fondamentali per l uso del computer12% di sconto
Acquista ora a soli 75 euro - Clicca qui, per riceverli comodamente a casa tua.
PERSONALIZZARE I MENU ORIZZONTALI
Alcuni template sono dotati di una utilissima barra orizzontale,
con la quale i visitatori possono rapidamente accedere ad
alcune pagine del blog.Per il proseguo della lezione, ho scelto come template, "Revolution Church", che contiene una barra dei menu apribili a tendina.
Clicca su "Download" per scaricare l'ultima versione del modello.
Oppure, se non è più disponibile scaricalo da qui.
Questo modello ha una doppia barra orizzontale dotata di menu a discesa a più livelli.
La gestione non è facile, ma verrà ripagata dal risultato particolarmente professionale.
SALVARE 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.Dalla scheda "Tema", clicca su "Backup/Ripristino", (posto in alto a destra).
Clicca su "Scarica tema" 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 trascendentale, 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: Visual Studio Code 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.
IL CODICE DEL MENU
Questo che segue è il codice della prima barra orizzontale del modello Revolution Church,che potrai trovare scorrendo la finestra del codice, dalla riga 837.
<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>
GESTIRE IL CODICE CON PROGRAMMI ESTERNI
Quello che segue riguarda la gestione/modifica del codice mediante programmi esterni.Se la cosa ti può interessare continua la lettura, altrimenti passa alla lezione successiva dove imparerai ad eliminare ed aggiungere nuove voci ai menu.
COPIARE ED INCOLLARE VELOCEMENTE
Per lavorare il codice sul programma (SciTE in questo caso),1 - dal pannello di controllo del tuo blog,
2 - clicca sulla scheda "Modello" clicca su "Modifica HTML".
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.
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
4 - clicca sulla scheda "Modello" clicca su "Modifica HTML"
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.
Ti potrebbe interessare anche...
Fare calcoli e creare elenchi con
- Scopri l affascinante mondo del Web
- Crea una email e impara ad usarla
- Naviga sicuro e mantieni efficiente il tuo PC
- Partecipa attivamente e crea il tuo primo Blog
Frasi celebri
“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).