09/07/2010
Inserire la message box nel menù orizzontale
Avete appena aggiornato il vostro Blog inserendo un menu orizzontale, al quale avete aggiunto anche il motore di ricerca e adesso volete anche che i visitatori del vostro blog possano contattarvi in modo diretto e veloce grazie ad un link nel vostro nuovo menù orizzontale? E allora facciamolo! :) (oggi c’è ilarità in redazione).
Il metodo più veloce è quello di inserire nel vostro menu orizzontale il link alla Message Box.
Se non lo avete ancora fatto pubblicate in una delle colonne del vostro Blog il modulo “C6 Messenger”: entrate nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” e cliccate sul link “Aggiungi alla barra di navigazione” che trovate a destra di “C6 Messenger” e salvate le modifiche.
Aprite il vostro Blog e cercate nella colonna in cui lo avete pubblicato il modulo di “C6 Messenger”:
Con il tasto destro del mouse cliccate sul bottone “Contattami”. Si aprirà un menù a tendina, cliccate su “Copia indirizzo” se utilizzate Firefox e su “Copia collegamento” se utilizzate Internet Explorer.
Aprite un programma di testo ed incollate il link appena copiato, salvatelo e tenete il file da parte, ci servirà tra poco. (A questo punto potete rimuovere il modulo “C6 Messenger”).
Ora, all’interno delle pagine del template (in ognuna delle 5 sezione viste nel precedente tutorial – link -), cercate il codice che rappresenta il vostro menu orizzontale e aggiungete una nuova voce del menu.
Potete inserire un semplice testo oppure un’immagine, l’importante è che incolliate la url della vostra Message Box al suo interno.
Esempio: voce di menu in formato testuale:
<a class=”menu_orizzontale”
href=http://URL_C6Messanger>Contattami!</a>
Esempio: voce di menu in formato grafico:
<a class=”menu_orizzontale” href=http://URL_C6Messanger>
<img src=http://URL_dell’immagine alt=”Scrivimi!”></a>
Salvate le modifiche et voilà!
Buon lavoro!
11:14 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (2) | Segnala
| Tag: message box, myblog, redazione, tutorial, menù orizzontale | OKNOtizie |
|
del.icio.us
|
|
Digg |
Facebook
10/07/2009
Inserire un menù orizzontale nel Blog

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!
13:15 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (8) | Segnala
| Tag: myblog, tutorial, tips, trick, foto, immagini, menu orizzontale, cateogorie, grafica, glitter | OKNOtizie |
|
del.icio.us
|
|
Digg |
Facebook









