Creare una barra di navigazione utilizzando bottoni grafici

Avevo già annunciato nella precedente guida su come creare una barra di navigazione su Blogger che avrei approfondito l’argomento, abbellendo il menù con delle immagini. E’ proprio quello che spiegherò adesso, fermo restando che vi invito a leggere il precedente articolo per maggiori chiarimenti, perchè partirò dall’assunto che abbiate già chiaro il meccanismo di base (l’unica parte che non vi servirà e che dovrete saltare è il paragrafo intitolato “Abbelliamo i pulsanti”).

Il codice che genereremo potrà comunque essere utilizzato su qualunque pagina HTML.

Cominciamo!

Creare dei bottoni grafici

Per prima cosa occorre creare dei bottoni grafici il cui stile si sposi bene col resto del blog. Potete utilizzare Buttonator di cui ho parlato (non a caso) nel precedente post, oppure se siete amanti del fai da te potete ricorrere ad altri programmi come il basilare Paint fornito con Windows o, se volete qualcosa di più completo, potete usare Gimp, programma totalmente gratuito.

Le immagini ottenute vanno pubblicate in rete con un servizio come Skydrive o Picasaweb.

Per la mia prova, io ho creato questi pulsanti:

   

Inseriamo i pulsanti

Prendiamo la porzione di codice che ho descritto nel precedente articolo per generare un link testuale:

<a href="indirizzo della pagina web">Home</a>

E modifichiamolo togliendo Home e aggiungendo la parte in blu:

<a href="indirizzo della pagina web"><img src="immagine bottone" border="0" /></a>

Personalizzando:

1. indirizzo della pagina web con l’indirizzo della pagina web a cui porterà il pulsante cliccandoci sopra
2. immagine bottone con l’indirizzo dell’immagine del bottone

Seguendo le mie precedenti istruzioni, basta inserire il codice ottenuto dentro un elemento di tipo HTML/JavaScript, e salvando l’elemento vedrete già la nuova barra dei menù con bottoni grafici:

 

 

Semplice, no? Nei prossimi articoli approfondirò come cambiare l’immagine e come fare comparire un menù a tendina al passaggio del mouse. Per qualsiasi chiarimento, lasciatemi un commento (che fa pure rima!)

 

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!