Om man vill ha en liten extra meny på sin blogg, i form av flikar, så finns det ett ganska så enkelt sätt att göra det.


Vill du se hur det ser ut på riktigt, så kika här: [Länk]

Hur gör man då?

1. Gå in på din stilmall.

2. Lägg in följande kod längst ner på din stilmall och spara sedan stilmallen:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */ 

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left; /*Ändra till right om du vill ha flikarna till höger*/
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}


3. Gå nu in under dina kodmallar.
bloggdesign designa din blogg ändra namn på länkar
4. Lägg in följande kod precis ovanför <div id="content"> (1 i bilden)

<div class="mattblacktabs">
<ul>
<li><a href="adressen till sidan">Länk 1</a></li>
<li><a href="adressen till sidan">Länk 2</a></li>
<li><a href="adressen till sidan">Länk 3</a></li>
<li><a href="adressen till sidan">Länk 4</a></li>
<li><a href="adressen till sidan">Länk 5</a></li>
</ul>
</div>


5. Ändra nu dina länkar, så att de får rätt adress och så att själva länkordet i sig blir det du vill.
Där det står adressen till sidan, där ska du lägga in adressen till den sidan du länkar till. Där det står Länk 1, Länk 2 osv, där skriver du själva ordet som syns i fliken, dvs det som du klickar på.
Vill du lägga till ytterligare länkar, så lägger du till ytterligare rader: <li><a href="adressen">Länk</a></li>

6. Gör nu samma sak på dina andra kodmallar, archive page, category page och entry page (2 i bilden ovan).

Om du vill ändra färger på flikarna osv, så gör du alla inställningar i stilmallen, dvs i den koden som du la in i steg 2.
Alla förändringar du kan göra, finns förklarade på engelska.
Lycka till!

Om Lari

Lari Salminen har skrivit 877 inlägg.

Grundare av Designa Din Blogg. Jobbar heltid som brandman på Medelpads Räddningstjänstförbund och driver den här sidan på fritiden som en hobby.