Hur du gör boxar i menyn.
Jag tänkte göra en guide till hur man gör boxar till menyn, eller jag ska åtminstone försöka förklara så gott som möjligt :)
1. Gå in på stilmallen och ta bort koden background under #side.
2. Därefter ska du lägga in den här koden under #side:
1. Hur du får en länkad bild:
3. <li> och </li> gör så att du får sakerna i boxen listade, tex i min box till arkivet, har jag använt mig utav en lista, men där ajg har skrivit länkar till bloggar har jag istället låtit bli att använda det. Så om du vill ha en lista, så ska du sätta in innehållet mellan <li> och </li>.
Om ni har frågor eller det krånglar, är det bara att fråga om hjälp, lycka till! :)
1. Gå in på stilmallen och ta bort koden background under #side.
2. Därefter ska du lägga in den här koden under #side:
#box1 {
width: 190px; ← Bredden på menyrutan
padding: 5px 5px 5px 5px; ← Hur långt texten ska flyttas inåt,neråt och uppåt. De går i ordningen: top, right, bottom, left.
margin: 10px 0px 0px 0px; ← Flytta menyn här. top, right, bottom, left.
background: #FFFFFF; ← Bakgrundsfärgen på boxen.
}
3. När du har lagt in den koden, ska du sedan gå in i kodmallen och lägga till <div id="box1"> innehållet här </div> Under <div id="side">. Om du inte lägger in koden på rätt ställe, kommer det inte att funka.
width: 190px; ← Bredden på menyrutan
padding: 5px 5px 5px 5px; ← Hur långt texten ska flyttas inåt,neråt och uppåt. De går i ordningen: top, right, bottom, left.
margin: 10px 0px 0px 0px; ← Flytta menyn här. top, right, bottom, left.
background: #FFFFFF; ← Bakgrundsfärgen på boxen.
}
3. När du har lagt in den koden, ska du sedan gå in i kodmallen och lägga till <div id="box1"> innehållet här </div> Under <div id="side">. Om du inte lägger in koden på rätt ställe, kommer det inte att funka.
4. Om du sen vill ha flera rutor gör du bara precis likadant men ändrar siffran 1 till 2, sen 3 osv. Du måste alltså lägga till en ny kod för varje box.
Ordningen du lägger upp koderna i i kodmallen, bestämmer vilken ordning de kommer att ligga i själva bloggen sen, alltså spelar det ingen roll om du lägger 3ans kodmall före 2ans.
Några tips på hur boxarnas kodmallar kan se ut:
1. Hur du får en länkad bild:
<div id="box1"><div class="Här skriver du in rubriken du vill ha på boxen, om du inte vill ha någon kan du bara ha det tomt här"></div>
<ul>
<li><a href="Här kan du sätter du in länken"><img src="Här sätter du in bilden" border="0"></a></div>
</li>
</ul>
<div id="box7"><div></div>
<ul>
<li><a href="http://jjohhannnaa.blogg.se/2009/march/valkommen-till-min-nya-blogg.html#comment
"><img src="http://jjohhhanna.blogg.se/images/2010/75hih6_105789865.jpg" border="0"></a></div>
</li>
</ul>
2. Sätt in länkar:
<div id="box8">
<div class="navheader">Här skriver du rubriken till boxen.</div>
<ul>
<a href="Här sätter du in länken/" title="">Här skriver du vad länken ska heta, tex. om jag länkar till elins blogg, skriver jag Elin här.</a>
</ul>
</div>
3. <li> och </li> gör så att du får sakerna i boxen listade, tex i min box till arkivet, har jag använt mig utav en lista, men där ajg har skrivit länkar till bloggar har jag istället låtit bli att använda det. Så om du vill ha en lista, så ska du sätta in innehållet mellan <li> och </li>.
Om ni har frågor eller det krånglar, är det bara att fråga om hjälp, lycka till! :)
Kommentarer
Postat av: bellavideos
du.. kan du förklara för mig eller typ hjälpa mig att få transparenta boxar?
Postat av: cecilia
Hej!
Jag har testat med jättemånga olika koder på olika bloggar och när det enu en gång inte fungera tänkte jag fråga dig om du vet vad som är fel... När jag gör boxen högst upp (jag vet att jag bara gör en box till de som jag vill ha en box till) så blir allt som är under också med i den boxen. Du vet möjligvis inte vad som är felet?
tack på förhand! :)
Trackback
