PC da Zero - Guida facile e pratica per usare il computer

CREARE BLOG > Creare un menu a tendina con un apposito template


3-libri-2019.jpg - 21,6 KB I 3 Manuali fondamentali per l uso del computer
20% di sconto

Acquista ora a soli 68 euro - Clicca qui, per riceverli comodamente a casa tua.

PERSONALIZZARE I MENU ORIZZONTALI

template revolution church 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".
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>

verrà modificata così:

<a href='#'>Fotografie</a>

menu blog modificato
Potrai modificare in questo modo, tutti i nomi dei menu che si trovano tra
<a href='#'> e </a>

INSERIRE I LINK

esempio di menu dinamico a comparsa 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.




Frasi celebri

“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).