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:

image  image  image

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:

 

image

 

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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

27 commenti:

Anonimo ha detto...

funziona! da me e uscito bene

Den ha detto...

I tuoi bottoni sono venuti proprio bene! Forse dovrei metterne qualcuno anch'io...
Cmq, anch'io finisco spesso i post con "Per qualsiasi chiarimento, lasciate un commento!"
Che casualità!!!!!
Buona giornata!

ziva ha detto...

Grazie mille!!!!

Nicoletta De Col ha detto...

Grazie! Sei sempre bravo, chiaro e preciso!

DotFab ha detto...

Sai per caso come si usa CSS Tab Designer v2.0???
Non riesco ad inserire i bottoni...mi puoi aiutare?
Grazie

bluines ha detto...

vorrei farti i miei complimenti per la competenza, l'utilita' e la chiarezza del tuo blog !
dicevo chiarezza ma ahime' per un neofita e alquanto sprovveduto utente come me resta complicata anche lazione apparentemente piu 'semplice;
vorrei inserire nell'intestazione il pulsante home e altri due pulsanti che che collegano a delles ezion ispecifiche
se tu mi spiegassi come fare te ne sarei grato, immensa,mente grato! grazie, ciao

Antonella Riviello ha detto...

Semplicemente fantastico! Smanetto alla meglio con il mio blog e grazie ai tuoi suggerimenti tutto è straordinariamente semplice! Ho inserito il tuo link nei miei blog e vorrei chiederti, però, come si fa a creare il link al mio banner del blog? Grazie da Antonella
I miei blog:
http://giunglaitalia.blogspot.com
http://amicidichicca.blogspot.com

Antonella Riviello ha detto...

Ah, dimenticavo....meriti veramente tanti complimenti per la tua competenza, la tua professionalità e la chiarezza nella descrizione degli argomenti che diventano facilmente comprensibili anche per chi, come me, da poco di è incamminata nei meandri degli HTLM!

Annelise ha detto...

Grazie Grazie Grazie anche per questo post! ps imge shack soffe il caldo...perchè è stato di una lentezzaaaaa =))
cmq tutto ok!!!

Liliana ha detto...

ciao,ho creato i bottoni con buttonator e li ho inseriti nella barra ma questi si disongono verticalmente anzichè in orizzontale...non so cosa modificare per avere la classica barra con bottoni uno accanto all'altro...
grazie
http://lillysartcreationandcrafts.blogspot.com/

Fabrizio Basciano ha detto...

Ciao.
Innanzitutto grazie (il miliardesimo uomo sulla terra che ti ringrazia!) per tutte le info utili e chiare.
Sono riuscito a creare i miei bottoni, e ora ho i miei 4 "home" "musica" "testi" e "video". Giunti a questo punto però mi chiedevo: come creare ora le pagine web corrispondenti ai diversi bottoni?
Nel senso che quando vado a cliccare sul singolo bottone mi da pagina inesistente.
Scusa il disturbo e spero in tue nuove.
Saluti cordiali,
Fabrizio.
P.s.: ti ho inserito ovviamente nel mio blogroll, ancora esiguo visto che son giunto su blogger da poco.

Marica ha detto...

ciao :)
intanto grazie per i tuoi consigli sempre utili e chiari. Ho inserito due bottoni nel mio blog, solo che quando clicco la pagina mi si apre nella stessa finestra... cosa devo modificare per fare in modo che si apra in una nuova finestra?
grazie mille

Marica
http://chiarordiluna.blogspot.com

Mica ha detto...

E' possibile aggiungere questi bottoni posizionandoli, nell'area header, in basso e spostati verso sinistra?
Come i bottoni "Blog" e "Profile" in questo blog http://blog.inspirit.ru/ per intenderci...

Mica ha detto...

Ps: grazie per il tuo blog prezioso e gentile

ipod ha detto...

Articolo interessante grazie.ho inserito un collegamento a creare blog nel mio blog.

Sagitter ha detto...

Seguendo questa piccola guida ho creato la barra di navigazione e i pulsanti, ma le immagini non ne vuole sapere di mostrarle, nonostante abbia seguito le tue indicazioni a proposito.
L'immagine è presente su skydrive.

arrgianf ha detto...

e finalmente dopo un anno ci sono riuscito :):) semplicemente il problema stava sul fatto che io andavo sul codice html del modello e non mi rendevo conto che era semplicissimo andando nel layout!

Mariana & Roberta ha detto...

Purtroppo questo già onon sono riuscita a fare per causa delle imagini...grazie lo stesso

ASD Monteiasi Calcio ha detto...

Ciao Tenebrae ma per creare una barra di navigazione come quella che hai creato tu come sifa :)? ti ringrazio anticipatamente :)

Lucrezia ha detto...

grazie mille!!!!!!!!!

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

林剑伟 ha detto...

oakley store online
tiffany and co uk
mlb jerseys authentic
nike kobe sneakers
tiffany and co outlet
http://www.2016michaelkorsoutlet.us.com
cheap oakley sunglasses
toms outlet
tiffany and co
http://www.chromeheartsonline.us.com
michael jordan shoes
http://www.huarachesshoes.co.uk
oakley vault
retro jordans
cheap real jordans
kobe byrant shoes
oakley sunglasses
fitflops outlet
tiffany and co
ray ban sunglasses outlet
michael kors handbags,michael kors handbags outlet,michael kors purses outlet,cheap michael kors handbags,cheap michael kors purses
chrome hearts
Michael Kors Outlet Store
Michael Kors Handbags
air jordan retro
michael kors outlet online
kobe shoes
kobe byrant shoes
ralph lauren uk
http://www.raybanglasses.in.net
nike zoom kobe
http://www.huarachesshoes.uk
air jordan
http://www.rayban-sunglasses.uk
oakley sunglasses

林剑伟 ha detto...

oakley store online
tiffany and co uk
mlb jerseys authentic
nike kobe sneakers
tiffany and co outlet
http://www.2016michaelkorsoutlet.us.com
cheap oakley sunglasses
toms outlet
tiffany and co
http://www.chromeheartsonline.us.com
michael jordan shoes
http://www.huarachesshoes.co.uk
oakley vault
retro jordans
cheap real jordans
kobe byrant shoes
oakley sunglasses
fitflops outlet
tiffany and co
ray ban sunglasses outlet
michael kors handbags,michael kors handbags outlet,michael kors purses outlet,cheap michael kors handbags,cheap michael kors purses
chrome hearts
Michael Kors Outlet Store
Michael Kors Handbags
air jordan retro
michael kors outlet online
kobe shoes
kobe byrant shoes
ralph lauren uk
http://www.raybanglasses.in.net
nike zoom kobe
http://www.huarachesshoes.uk
air jordan
http://www.rayban-sunglasses.uk
oakley sunglasses

dong dong23 ha detto...

cheap oakley sunglasses
michael kors outlet online
nike sb
nike running shoes
true religion jeans
nfl jerseys wholesale
christian louboutin outlet
abercrombie & fitch
celine
polo ralph lauren
nike basketball shoes
coach outlet
michael kors handbags
nike roshe flyknit
polo ralph lauren
coach outlet online
rolex watches
coach factory outlet
celine
cartier watches
ray ban sunglasses outlet
coach factory outlet
michael kors outlet
caoch outlet
coach outlet
michael kors outlet online
louis vuitton handbags
nike air force 1
louis vuitton outlet
louis vuitton
louis vuitton outlet
giuseppe zanotti sneakers
michael kors outlet
michael kors handbags
cheap jordan shoes
replica watches for sale
michael kors outlet clearance
ray ban sunglasses
cheap jerseys
20165.4wengdongdong

Chenzhen 20160303chenzhen ha detto...

ray-ban sunglasses outlet
adidas nmd black
coach factory outlet
nike free flyknit 5.0
cheap jordan shoes
ferragamo outlet
burberry sale
adidas superstars
ecco outlet
timberland uk
birkenstock uk
supra outlet
coach factory outlet online
adidas pure boost black
nike store uk
louis vuitton outlet
michael kors canada
dior sunglasses 2016
louis vuitton outlet online
toms outlet
fitflops shoes
nhl jerseys wholesale
cheap nfl jerseys
michael kors outlet store
nmd adidas
adidas supercolor pink
coach outlet online
under armour
air max 90 white
coach outlet online
hollister clothing
ralph lauren
birkenstock shoes
valentino
asics gel kayano
yeezy boost 750
michael kors canada
rolex watches for sale
michael kors handbags outlet
michael kors outlet
chenzhen201662

Unknown ha detto...

adidas nmd post
chargers jerseys of
mlb jerseys free
dallas cowboys jersey random
new balance shoes party
michael kors handbags love
moncler outlet coloring
adidas nmd myself
cheap nike shoes sale movie
cheap michael kors handbags my

raybanoutlet001 ha detto...

miami heat jersey
true religion jeans sale
pandora jewelry
jaguars jersey
cleveland cavaliers
salvatore ferragamo
hugo boss
coach outlet
canada goose
cheap oakley sunglasses


Prima di lasciare un commento, leggete qui

Posta un commento