REDAZIONE

In questo tutorial vi mostro come creare un menù orizzontale con le categorie del Blog e come inserirlo sotto l'immagine dell'header, ad esempio come nel Blog GossipWorld.

Le possibilità sono due:

1) creare un menù in flash
2) creare un menù utilizzando i CSS e l'HTML

Per il primo caso potete seguire questo tutorial, per il secondo vediamo adesso come possiamo procedere. Prima di tutto, dopo aver creato le categorie dei post, salviamo in un documento i link di ogni categoria.

Dal pannello di controllo del Blog andiamo in Presentazione > Opzioni avanzate e clicchiamo il link Modifica modello del Foglio di stile. Qui andremo a scrivere il codice CSS che definirà l'aspetto grafico del nostro menù, vediamo come.

Foglio di stile: CSS (tra i simboli /* e */ ci sono i commenti che spiegano il funzionamento di ogni riga):

#menu_orizzontale { /* al posto di “menu_orizzontale” potete inserire il nome che più vi è comodo */
background-color:#353535; /* definisce il colore di background in formato RGB esadecimale */
padding: 3px 15px 3px 15px; /* definisce la posizione dei link nel menù */
}

Definiamo ora la grafica dei link del menù:
a.menu_orizzontale:link {
font-family:Arial, FreeSans, sans-serif; /* sono i font che il menù deve utilizzare */
font-size:16px; /* è la dimensione che i link devono avere */
color:#FFFFFF; /* è il colore in formato RGB esadecimale che i link devono avere */
}

Ora, quando si passa il mouse su una delle voci del menù vogliamo che il colore dei link cambi. Quindi, sempre nel Foglio di stile, scriviamo i valori del menù nella fase denominata “:hover”:

a.menu_orizzontale:hover{
color: #999997;
}

In questo modo abbiamo impostato l’aspetto grafico che il menù orizzontale dovrà avere, ma il menù vero e proprio non lo abbiamo ancora realizzato.
Per creare ogni voce di menù dobbiamo inserire il seguente codice HTML:

<a class=”menu_orizzontale” href=http://NomeDelBlog.myblog.it/NomeCategoria>Voce del menù</a>

Dove:
class richama la grafica dal codice CSS nel Foglio di stile;
href contiene il link ad una delle categorie del Blog;
Voce del menù è il nome di una delle voci menù visibili dai visitatori del Blog.

Se vogliamo separare ogni voce di menù con un’immagine, basta inserire tra una voce e l’altra il seguente codice:

<img src=”http://UrlImmagineDaInserire”>

Dove href contiene l’indirizzo web in cui si trova l’immagine che desideriamo inserire.
Il risultato del codice finale sarà questo:

Ora possiamo finalmente inserire il menù orizzontale nel nostro Blog: dal pannello di controllo entriamo in Presentazione > Opzioni avanzate e clicchiamo sul link Modifica modello delle seguenti  pagine:

•    Modello della home page
•    Modello della pagina categoria
•    Modello della pagina dei commenti
•    Modello di pagina di Link permanente

Incolliamo il codice del menù tra queste due righe:

Salviamo le modifiche e guardiamo il risultato finale.
Se volete un’idea più concreta visitate http://gossipworld.myblog.it.

Quando avrete creato il vostro nuovo menù segnalatecelo, stiamo pensando di premiare i più belli offrendo più visibilità ai vostri Blog all'interno di MyBlog!