Flikar ovanför headern
Jag har fått frågan om hur man gör flikar ovanför headern. Så jag visar hur jag har gjort.
1. Gå in i din STILMALL och lägg till följande kod längst ner.
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc; /*Ändra färgen på menyflikarna här*/
color: #fff; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: verdana; /*Ändra typsnittet här*/
font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 10em; /* Ändra bredden på undermenyn här */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #889988; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #ffffff; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/
2. Gå nu in i dina kodmallar, Framsidan, Inläggsidan, Kategorisidan, Arkivsidan, och lägg in följande kod där du vill ha din meny.
Jag har lagt min precis under <div id="wrapper">. Men man kan lägga den var man vill.
Ladda upp den flik du gjort och vill ha.
ex:


<ul id="navbar"> <li><a href="index.html"><img src="http://jennysmodemix.se/images/2010/flik2_109873784.png" border="0"></a></li><li><a href="#"><img src="http://jennysmodemix.se/images/2010/flik1_109873814.png"border="0"></a> <ul>
<li><a href="../../category/kopa-fardig-design.html"> Köpa BloggDesign</a></li>
<ul id="navbar">
<li><a href="#">HÄR LÄGGER DU DIN FLIK</a>
<ul>
<li><a href="ADRESSEN TILL DEN SIDAN DU VILL MAN SKA KOMMA TILL">NAMNET PÅ KATEGORIN</a></li>
<li><a href="#">Länk 2</a></li>
<li><a href="#">Länk 3</a></li>
</ul>
</li>
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Länk 4</a></li>
</ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Länk 6</a></li>
<li><a href="#">Länk 7</a></li>
<li><a href="#">Länk 8</a></li>
<li><a href="#">Länk 9</a></li>
</ul>
</li>
</ul>
Börja med att lägga in adressen till de sidor som du länkar till, det gör du i denna kod:
<li><a href="#">Länk1</a></li>
Byt ut "#" mot adressen och byt ut "Länk 1" till det namn du vill att länken ska ha.
1. Gå in i din STILMALL och lägg till följande kod längst ner.
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc; /*Ändra färgen på menyflikarna här*/
color: #fff; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: verdana; /*Ändra typsnittet här*/
font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 10em; /* Ändra bredden på undermenyn här */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #889988; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #ffffff; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/
2. Gå nu in i dina kodmallar, Framsidan, Inläggsidan, Kategorisidan, Arkivsidan, och lägg in följande kod där du vill ha din meny.
Jag har lagt min precis under <div id="wrapper">. Men man kan lägga den var man vill.
Ladda upp den flik du gjort och vill ha.
ex:


<ul id="navbar"> <li><a href="index.html"><img src="http://jennysmodemix.se/images/2010/flik2_109873784.png" border="0"></a></li><li><a href="#"><img src="http://jennysmodemix.se/images/2010/flik1_109873814.png"border="0"></a> <ul>
<li><a href="../../category/kopa-fardig-design.html"> Köpa BloggDesign</a></li>
<ul id="navbar">
<li><a href="#">HÄR LÄGGER DU DIN FLIK</a>
<ul>
<li><a href="ADRESSEN TILL DEN SIDAN DU VILL MAN SKA KOMMA TILL">NAMNET PÅ KATEGORIN</a></li>
<li><a href="#">Länk 2</a></li>
<li><a href="#">Länk 3</a></li>
</ul>
</li>
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Länk 4</a></li>
</ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Länk 6</a></li>
<li><a href="#">Länk 7</a></li>
<li><a href="#">Länk 8</a></li>
<li><a href="#">Länk 9</a></li>
</ul>
</li>
</ul>
Börja med att lägga in adressen till de sidor som du länkar till, det gör du i denna kod:
<li><a href="#">Länk1</a></li>
Byt ut "#" mot adressen och byt ut "Länk 1" till det namn du vill att länken ska ha.
Kommentarer
Hej Jenny.
Hur får man en länk längst ner på sin blogg "äldre inlägg"? Ser att vissa bloggar har det, som t ex kenzas.se
SVAR tack desamma! :)
hej !
Allt bra ?
Några skojiga planer till helgen ??
Är du sugen på längre ögonfransar så passa på att tävla om fransnäringen RevitaLash på bloggen just nu.
Lycka till !
kram
Hej :) vet att du gjorde detta inlägg för jättelänge sedan. Men försöker med det hära, och mina flikar blev inte så där jätte fina. Så skulle jag kunna få ta din första flik? det första exemplet. :) Självklart kan jag länka dig, Men jag redigerar lite färger på den! Skulle bli jätte glad :) kram!
Trackback
it
10:47:59




Nu:




