Blogger: Tips and Tricks, Creare una Navbar (Barra Menu)

Ancora su Blogger.

Vediamo come creare una semplice barra dei strumenti orizzontale. Iniziamo dicendo che il lavoro è molto semplice, la barra verrà costruita come per qualsiasi sito tramite css e poi inserita tramite widget nel nostro blog.

Prima di tutto creiamo il nostro file html con la lista dei link:

HTML:

<ul id="nav">

<li><a href="http://bit8tbyte.blogspot.com/">Home</a></li>

<li><a href="http://bit8tbyte.blogspot.com/">Link1</a></li>

<li><a href="http://bit8tbyte.blogspot.com">Link2</a></li>

</ul>

 
In questo caso abbiamo creato tre voci del menu di navigazione,  ora dobbiamo inserirle in un widget del blog. Andiamo quindi sul nostro Blog ed aggiungiamo un widget sotto l’intestazione, ci si aprirà una finestra in cui dovremo scegliere il tipo di widget, noi sceglieremo l’opzione HTML/Java Script. Ora sulla pagina di organizzazione del Blog avremo un widget in più che andrà trascinato sotto quello dell’intestazione, la figura lo spiega molto chiaramente:

  

Ora nel widget clicchiamo su modifica,  lasciamo il titolo vuoto ed inseriamo il nostro codice all’interno del box sottostante. Clicchiamo su salva ed osserviamo il nostro Blog che avrà una barra verticale con i nostri tre link.

 

 

Andiamo ora ad applicare dei css per inserire un’immagine di sfondo, e mettere i link in orizzontale. Ci portiamo quindi su DESIGN->DESIGNER MODELLI->AVANZATO->AGGIUNGI CSS,  ed aggiungiamo il seguente codice:

 

Potete chiaramente giocare con i colori, o inserire un imagine di background inserendo nel blocco #nav, qualcosa del genere:

background-image :url('http://www.indirizzotuaimmagine');

Il risultato senza background è questo:





Alla prossima