Per inserire un menù a tendina
orizzontale, cioè sotto il titolo del blog
con i link Home ... ecc ecc.
bisogna intervenire nei codici CSS.
Andate in Design -Layout- Modifica HTML
e inserite il codice css dopo la riga di
codice <b:skin><![CDATA[/*.
il codice è questo:
/*CSS per il menu*/
ul#nav{font: 12px Verdena,Tahoma,sans-serif; font-weight: bold;}
ul#nav,ul#nav li,ul#nav ul,ul#nav ul li{margin:0;padding:0;list-style-type:none}
ul#nav{height:26px; line-height:25px; background: #2C2C2C; color: #FFFFFF;}
ul#nav a {display:block; padding: 0 15px; text-decoration: none; color: #FFFFFF;}
ul#nav li {float: left; position: relative;}
ul#nav li li {float: none; line-height: 22px; display:block !important;display: inline; /*IE*/}
ul#nav ul{position: absolute; top: 23px; left: -9999px; width: 12em;}
ul#nav ul {padding: 7px 0; border: 1px solid #AAAAAA;}
ul#nav li li a {height:22px} /*fix per IE */
ul#nav ul,ul#nav li li a {background-color: #2C2C2C; color: #FFFFFF;}
ul#nav li:hover,ul#nav a:hover{background-color: #AAAAAA; color: #000000;}
ul#nav li:hover ul,ul#nav li.sfhover ul{left: -1px;z-index: 100}
Post originale su: http://dreamworldgraphic.blogspot.it/p/menu-tendina-orizzontale.html
Under Creative Commons License: Attribution Non-Commercial No Derivatives
Se nel vostro template avete delle variabili
tipo:
<variable name="textcolor"description="Text color"
Type="color" default="#ccc" value="#cccccc">
dovrete inserire il codice dopo la dichiarazione dell'ultima variabile
salvate il modello.
Andiamo ora ad intervenire sull'HTML
questo è un codice che ho preparato come esempio
le varie sezioni spetterà a voi cambiarle in base
alle vostre esigenze
<ul id="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profilo</a>
</li>
<li>
<a href="#">Grafica</a>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Chat</a></li>
</ul>
</li>
<li>
<a href="#">Tutorial</a>
<ul>
<li><a href="#">Tubes</a></li>
<li><a href="#">Pagine Utili</a></li>
<li><a href="#">Premi</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Banner</a></li>
</ul>
</li>
</ul>
Post originale su:http://dreamworldgraphic.blogspot.it/p/menu-tendina-orizzontale.html
Under Creative Commons License: Attribution Non-Commercial No Derivatives
Il menù deve sempre iniziare con <ul id="nav"> e terminare con </ul>
Per le voci semplici come Home e Profilo
basta scrivere
<li>
<a href="indirizzo">Home</a>
</li>
che dovrete personalizzare
Per ogni voce con menù a tendina
come le altre voci nel mio esempio
si deve scrivere
<li>
<a href="#">Grafica</a>
<ul>
<li><a href="indirizzo1">Tag</a></li>
<li><a href="indirizzo2">Scrap</a></li>
</ul>
</li>
Post originale su: http://dreamworldgraphicblog.blogspot.it/p/menu-tendina-orizzontale.html
Under Creative Commons License: Attribution Non-Commercial No Derivatives
Per quanto riguarda l'inserimento del codice HTML
basta andare nel Layout
Aggiungi Gadget
nella posizione sotto il titolo
e cercate il gadget HTML/Javascritp
incollate il codice e salvate.
ciao, alla prossima
Nessun commento:
Posta un commento