Inserire un menu usando i CSS

E' sempre difficile, anche cercando nei siti in inglese, trovare un template che sia perfettamente adatto alle nostre esigenze. Per questo motivo è importante saper fare delle piccole modifiche per far diventare il nostro blog sempre più vicino (almeno dal punto di vista del layout) alla perfezione.
Ecco come inserire un meno orizzontale utillizzando i fogli di stile o CSS. il risultato sarà simile a questo:

Come procedere:

1- vai su Layout --> modifica HTML

2- Cerca la porzione </head>

3- Incolla il codice qui sotto appena prima

<style type='text/css'>

#nav {

width:100%;

margin-left:-40px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdbTDMFMVUN8PGidAHSUvsW-En2eHCIn13L2t9dKSrAYYAnT5lZV_RyKqLmNNSSAyIBcizTuUvEB3ByRdAPRxrFvHTQ0m1YrXbkRTO9qwHfgbUsmmvvKCCvUGpsCY2eYgz2UDOP1NpnIP/) repeat-x;

}



#nav li {

float: left;

display: block;

}



#nav li a {

float: left;

display: block;

padding: 12px 18px 12px 18px;

text-transform: uppercase;

text-decoration:none;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1E6E6kcZqwhocfrQqs5xj6cwPjJ1xxjoxIXsHl79Pmo8a9kn8YtEjjRRHllnuL_nlt58jPsfK-PIVXUahycTM9_Mp5lb6ZlGijaKnOXFQ7S5H3IoOyYo-lxUKvbmXY5l5UAIZ2GBO61l/) no-repeat top right;

color:#ffffff;

}



#nav li a:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1E6E6kcZqwhocfrQqs5xj6cwPjJ1xxjoxIXsHl79Pmo8a9kn8YtEjjRRHllnuL_nlt58jPsfK-PIVXUahycTM9_Mp5lb6ZlGijaKnOXFQ7S5H3IoOyYo-lxUKvbmXY5l5UAIZ2GBO61l/) no-repeat right -40px;

color:#ffffff;

text-decoration:none;

}



ul#nav li.current_page_item a, ul#nav li.current-cat a {

color: #fff;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1E6E6kcZqwhocfrQqs5xj6cwPjJ1xxjoxIXsHl79Pmo8a9kn8YtEjjRRHllnuL_nlt58jPsfK-PIVXUahycTM9_Mp5lb6ZlGijaKnOXFQ7S5H3IoOyYo-lxUKvbmXY5l5UAIZ2GBO61l/) no-repeat right -80px;

}



#nav li ul {

display: none;

}

</style>

In questo modo abbiamo impostato i CSS
NOTA: le due immagini (quelle che trovi subito dopo a background: url) ti consiglio di scaricarle e hostarle nel tuo server, io uso photobucket. Puoi anche sostituitle con quelle che preferisci.

4- Salva il tuo Template

5- Ora vai su layout --> Elementi pagina e clicca su aggiungi gadget dove vuoi posizionare il menu

6- Scegli Html-javascript e incolla questa porzione di codice

<ul id="nav">

   

<li class="current_page_item"><a href="#">Home</a></li>

           

<li><a href="#" title="#">HTML</a></li>



<li><a href="#" title="#">CSS</a></li>



<li><a href="#" title="#">PHP</a></li>



<li><a href="#" title="#">MySQL</a></li>



<li><a href="#" title="#">About</a></li>



<li><a href="#" title="#">Contact</a></li>



</ul>

   

<div class="clear"></div>

Sostituisci tutti gli # che si trovano dopo href= con i link che vuoi vengano aperti e le parole tra i due >...< con quello che vuoi che vedano i lettori.

7- Salva e il lavoro è completo

Altri articoli simili:

Posted in: CSS,Layout,Modificare Template,Tutorials