Menu di navigazione per intestazione Blog di colore Rosso

Menù di navigazione e intestazione per Blog…


Nuovo interessante menu di navigazione per Blog, bello e pratico e molto facile da inserire senza dover ricorrere a nessuna modifica del HTML. Per installarlo è molto semplice basta andare sulla Bacheca del proprio sito si clicca su Design, subito dopo su Aggiungi un Gadget e nella finestra che si apre cliccare su HTML/JavaScript. All’interno di questa finestra si Copia e si Incolla il codice del menu di navigazione. Si procede alla personalizzazione del Widget menu mettendo i link diretti del proprio Blog e una volta soddisfatti si clicca su Salva. Subito dopo si posiziona il menu dove meglio desideriamo.
Questo è il Codice del Menu da prelevare



<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="http://weblifeonline.blogspot.com"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Le personalizzazioni da apportare al Codice Menu
# : al posto di questo simbolo tra i simboli “ “ va inserito l’indirizzo (URL) che desideriamo collegare al menu orizzontale come da esempio in alto (http://weblifeonline.blogspot.com).
Link 1, 2, 3, ecc : al posto di questa parola dobbiamo inserire il nome o titolo del collegamento, come da esempio in alto (Home).
Per vedere l’effetto grafico del Widget Menu orizzontale di navigazione per Blog, guardare subito sopra il titolo di questo post. Il Menu è attivo.

Nessun commento:

Posta un commento

Menu di navigazione per Blog colore Rosso

Menu di navigazione per Blog colore Orange e Blu

Widget Ultimi Post con elemento pagina HTML/Javascript

Widget: ultimi articoli per singola categoria, es. "Internet"