Nyhet! Besøk stihk.com for å få hjelp og gratis bloggdesign

Bygg ditt eget design #2: Meny

I forrige del av "Bygg ditt eget design", gikk jeg raskt gjennom hvordan man fikk en header på bloggen sin. I denne delen (del 2), kommer jeg til å gå gjennom hvordan man kan lage en enkelt meny under headeren sin. Lignende den jeg har på bloggen min.

Bygg ditt eget design: En steg for steg guide

La oss lage en meny!
I koden under ser dere hvordan html-koden for en enkel meny ser ut. Der har vi "pakket" inn alle linkene i et element med meny som id. Det er også en klasse med navn "clearfix", som sørger for at alt inne i elementet blir vist. Clearfix er definert av blogg.no sin standard mal og er defor ingenting jeg kommer til å gå igjennom i denne guiden. Slik er html-strukturen:
<div id="meny" class="clearfix">
     <a href="LINK">TEKST</a>
     <a href="LINK">TEKST</a>
     <a href="LINK">TEKST</a>
     <a href="LINK">TEKST</a>
</div>
I koden over ser dere også 4stk a-elementer. I feltet href skal dere fylle inn hvor den spesifikke linken skal sende brukeren som trykke på linken. Derfor må du endre LINK til en internettadresse. Jeg har linket til en bloggpost for hver enkelt link. Der det står TEKST må du skrive det du ønsker at skal vises i menyen. For eksempel "Hjem". Du kan i teorien ha så mange linken i menyen som du bare ønsker.

Hvor skal html-koden til menyen legges inn?
I kontrollpanelet ditt går du til "Design -> Rediger -> Maler (HTML)" og kopier html-koden inn i alle malene. Både for "Forsiden", "Innlegg", "Kategori" og "Arkiv". Let og finn "<div id="wrapper"...." og lim inn koden din FØR det. Se bilde og video:




Pass på at du limer inn koden på riktig sted og på alle malene som er tilgjengelig.

Hvordan gi menyen en stil?
For å gjøre det så enkelt som mulig, så inneholden denne menyen ikke noe alfor "fancy". Det eneste som er i tillegg til selve css-koden er dette bildet som er bakgrunnen til hele menyen. Følgende kode er stilen for menyen vi lager og den den må du legge inn i "Design > Rediger > Stilsett (CSS)". Merk at alt som står mellom /* */ er kommentarer og har ingenting å si for css-koden, uten at det forklarer litt av koden:
/* Elementet: Meny */
#meny {
     background: url(http://i46.tinypic.com/9uqm52.png) repeat-x;
     overflow: hidden;
}
/* Alle linkene i menyen */
#meny a {
     line-height: 30px;
     padding: 0 10px;
     color: #ffffff;
     display: block;
     float:left;
}
/* Når man holer musen over linkene */
#meny a:hover {
     background: #778c34;
}

Slik er resultatet etter del 2 av guiden:



Klarer du dette?
24.02.2010 kl.18:00 i Guide - 7 kommentarer - # - Permalenke - Del på Twitter

7 kommentarer

TheRadioWoman

24.02.2010 kl.23:34
SV: Takk, jeg skal gjøre mitt beste for å oppdatere ofte! Kom gjerne med innspill :)

INA :33

21.04.2010 kl.13:14
Takk for zupa tutorial :D

Lillemorslife

22.04.2010 kl.17:03
TAKK FOR TIPSET, men hvor limer du inn den siste koden?

devpublish

22.04.2010 kl.17:41
Lillemorslife: CSS-koden limer du inn i Design > Rediger > Stilsett(CSS)

Lillemorslife

24.04.2010 kl.13:12
Hei, kan du lage et innlegg med tips om menyen. Hvordan få fint design til menyen og osv.

cecilieak

15.10.2010 kl.11:11
Hvordan kan jeg ''spre'' de forskjellige kategoriene? nå er alle helt til venstre.. svar på min blogg er du snill :)

devpublish

17.10.2010 kl.00:36
cecilieak: Jeg svarer deg her.

Når du skriver "kategoriene" tror jeg du mener de elementene som er i menyen din. Du kan f.eks prøve å bruke denne css-koden:

#meny { text-align: center; }

#meny a {

padding: 15px 20px;

display: inline-block;

}

Skriv en ny kommentar

hits