PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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




PERSONALIZZARE I MENU ORIZZONTALI

00-revolution-church.jpg - 20,6 KB 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 "Modello", clicca su "Backup/Ripristino", (posto in alto a destra).
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 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".
01-modifica-html.jpg - 11,5 KB
Ma non è la soluzione ottimale.
Mi permetto quindi di consigliarti di utilizzare un programma apposito per la gestione del codice: HTML-Kit 292 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>

02-menu-modificato.jpg - 3,6 KB
Potrai modificare in questo modo, tutti i nomi dei menu che si trovano tra
<a href='#'> e </a>

INSERIRE I LINK

03-menu-template-revolution-church.jpg - 17,8 KB 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.





creareblog-v02-170.jpg - 5,8 KB
Questa lezione è presente nel libro Creare Blog e Siti Web gratis (II ed.)
Clicca qui per leggere tutti gli argomenti
e come ordinare il libro.


Oppure Vai al Video Corso Completo per creare Blog



Link sponsorizzati