• Hjem
  • Portefolie
  • Om bloggen
  • Om meg
  • Gratis design
  • Blogger jeg liker
  • Designhjelp
  • Hvordan jeg hjelper
19 mai 2009

Design: Meny

[EDIT] Tiril ( http://www.tiruuuuul.blogg.no ) lurtepå om hvordan hun forandret fargen på menyen. Har skrevet inn kommentarer i CSS delen. Kommentarene behøves du ikke å fjerne når du limer inn koden

Jeg har vært innom en god del blogger og jeg ser at det er mange som er flink til å ordne designet sitt selv, men de har alltid spørsmål om et eller annet. Derfor tenkte jeg at jeg kunne ordne en kategori der jeg la inn litt design tips. Jeg kan tipsene, men jeg er utrolig dårlig til å fikse design som ser bra ut selv ;)

Vanskelighetgrad: Lett, bare du holder tungen rett i munnen og følger oppskriften.

Det første jeg vil ta for meg er menyer, jeg ser det er mange som lurer på hvordan de kan få seg en meny på siden. Det er faktisk ikke så vanskelig som noen vil ha det til.

Denne gangen skal vi prøve på denne menyen her:

  • Hjem
  • Om siden
  • Om meg
  • Kontakt

La oss begynne. Jeg har bare erfaring med blogg.no så jeg vil her vise hvordan du setter den inn i desighet der:

Logg deg inn.

Velg “Design”

Velg “Rediger”

Sett inn disse linjene med kode pÃ¥ slutten av “stilsett” filen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
#meny2 {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}

#meny2 li {
float: left;
margin: 0;
}

#meny2 li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color:  #000; /* Farge på skriften */
}

#meny2 li a:hover, #meny2 li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}

#meny2_wrapper ul {
margin-left: 12px;
border-top: 2px solid #356AA0;   /* Farge på top-rammen */
border-bottom: 2px solid #204061; /* farge på bunn-rammen */
background: #356AA0; /* bakgrunnsfarge */
}

#meny2_wrapper li a:hover, #meny2_wrapper li.active a {
color: #90CDFF;   /* skrift farge når du holder musen over */
background: #3D7BBB; /* bakgrunnsfarge når du holder musen over */
border-bottom: 2px solid #356AA0;  /* farge på bunn-rammen når du holder musen over */
}

#meny2_wrapper {
padding: 0 16px 0 0;
background: url(rund.png) no-repeat right;
}

#meny2_wrapper div {
float: left;
height: 44px;
width: 12px;
background: url(rund.png) no-repeat left;
}

Her kan du forandre pÃ¥ bakgrunnsfargen, størrelse pÃ¥ fonten. Den mÃ¥ ogsÃ¥ ha “rund.png” bildet ellers vil du ikke fÃ¥ avrundet kanter. Det som jeg bruker her kan du laste ned her:

NÃ¥r det er gjort trykk pÃ¥: “lagre stilsett”

SÃ¥ trykker du pÃ¥ “Maler”

Her mÃ¥ du finne hvor du vil sette inn meny linjen pÃ¥ siden din. Hvis du ikke er sikker sÃ¥ vil jeg anbefale deg i Ã¥ sette det  etter “breadcrumbs”, dvs etter denne linjen som er slik ut ( kommer litt ann pÃ¥ hvor mye du har forandre pÃ¥ original designet) :

<div class=”breadcrumbs”>

over denne kopierer du inn følgende html kode:

1
2
3
4
5
6
7
8
<div id="meny2_wrapper">
<ul id="meny2">
    <li><a href="#">Hjem</a></li>
    <li><a href="#">Om siden</a></li>
    <li><a href="#">Om meg</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>
</div>

Her kan mÃ¥ du forandre pÃ¥ hva som skal stÃ¥ pÃ¥ knappene og hvor de skal peke.  Feks. hvis jeg ville at “Hjem” skulle peke til min side her sÃ¥ hadde den sett slik ut:

<li><a href=”http://www.lostdot.com/”>Hjem</a></li>

Du kan putte inn flere linjer hvis du ønsker det. NÃ¥r du er ferdig trykk pÃ¥ “lagre”. NÃ¥ har menyen kommet pÃ¥ hoved siden, hvis du vil at menyen skal komme opp nÃ¥r noen er inne pÃ¥ et innlegg Ã¥ leser mÃ¥ du legge inn siste koden i filen “Enkeltinnlegg” ogsÃ¥.

Det er bare å prøve seg frem med forskjellige farger og oppsett.

Hvis det er noe som ikke går eller du får problem er det bare å rope ut, under her :)

CSS koden og bildet er hentet fra http://13styles.com/category/css-menus/ . Du kan følge oppskriftet min over og kopiere inn andre menyer fra denne siden.

Lykke til.

88 Kommentarer til “Design: Meny”

« Older Comments
  1. Anne says:
    3. januar, 2010 klokken 13:16

    Jeg har limt inn både stilsett koden og HTML koden, allikevel får jeg bare til en meny sånn her:

    * Hjem
    * Om meg
    * Inspirasjoner
    * Kontakt

    Jeg får ikke det resultatet som du viser i eksempelet! Hjelp?

  2. Anne says:
    3. januar, 2010 klokken 19:54

    Jess, der fikk jeg det til! Takk Trond =D

  3. Anne says:
    3. januar, 2010 klokken 22:15

    Under menyen min er det en prikkete strek som streker mellom menyen og innleggene mine. Jeg ser den streken egentlig skulle vært helt nederst, hvordan fjerner jeg den egentlig, eller flytter den tilbake? Jeg lurer også på om du vet om en kode som er en strek som skal skille sidemenyen og innleggene mine?

  4. Anne says:
    3. januar, 2010 klokken 22:50

    Takk for sist svar! Jeg fikk det til:)

    Vet du ossen man legger inn et større mellomrom mellom menyen og selve bloggen?

  5. Anne says:
    3. januar, 2010 klokken 23:06

    Sv; *rødme* Haha, det skal jeg huske på, huff! =D

  6. Anne says:
    3. januar, 2010 klokken 23:08

    Og btw, jeg glemte å spørre om hvordan man midtstiller menyen?
    Okei.. kanskje det er en bra ide og legge deg til på msn eller no..
    Disse spørsmålene slutter jo aldri :P

  7. Stine says:
    8. januar, 2010 klokken 17:51

    Tusen takk :-) Brukte kodene, å gikk kjempe fint :D

  8. Ine Nagel Holter says:
    9. januar, 2010 klokken 10:09

    Hei! Jeg prøvde først hele denne oppskriften, og det gikk fint, men den passet ikke til layouten i og med at den ble så kort og fargene matchet ikke. Så jeg fikk inn på den linken du la ved, og fant CSS-koder. Tenkte å bruke Single level Pianist. Men da gikk det ikke lenger. Byttet CSS-koden, og da endte jeg opp med samme type meny som hun Anne over her, hvor det bare ble ramset med vanlig skrift nedover.

    Noen ideer om hva jeg kan ha gjort galt? Fryktelig irriterende :)

    Ine

  9. evelyn says:
    17. januar, 2010 klokken 15:05

    jeg har gjort alt som du sa, men når jeg er på bloggen min så er menyen sånn her:

    * Hjem
    * Om meg
    * Kontakt
    * Facebook

  10. evelyn says:
    17. januar, 2010 klokken 18:49

    takk det funket, :) men den menylinja over og under, hvordan får jeg den lengre for jeg vil gjerne ha den helt ut i kanten. har du en kode for det?

    har du en kode for en “smalere blogg” ?

  11. evelyn says:
    17. januar, 2010 klokken 18:49

    og få bort de prikkelinjene over hele bloggen, vil bare ha rett linje :)

  12. Elisabeth says:
    17. januar, 2010 klokken 20:02

    Hei, du virker som en ekspert pÃ¥ blogg design, sÃ¥ derfor lurte jeg pÃ¥ om du kunne hjulpet meg. Jeg har endret en del ting pÃ¥ bloggen nÃ¥, ogsÃ¥ har bakgrunnen til “arkiv”, “siste innlegg” blitt altfor “lange” sÃ¥ de gÃ¥r lkksom over hele bloggen…

    HÃ¥per du kan hjelpe meg :)

    http://elisabethknedahl.blogg.no/

  13. Elisabeth says:
    17. januar, 2010 klokken 20:28

    Hva er E-posten din da? Vis jeg skulle sende det? ;)

  14. Ronja says:
    18. januar, 2010 klokken 18:27

    Hei det eneste som skjer er:

    Hjem
    Om siden
    Om meg
    Kontakt

    sÃ¥nne uten ”knappene”
    Hva ska jeg gjøre?
    mvh: http://www.aquapopzi.blogg.no

  15. hanne luneborg says:
    24. januar, 2010 klokken 04:19

    hei:D lurte på om du kunne hjelpe meg med hvordan jeg får større mellomrom mellom innleggene og menyen? også hvordan jeg får profilbildet og det over på venstre siden av bloggen?

  16. Ine says:
    12. februar, 2010 klokken 20:21

    Heisann! Utrolig flott side dette, hjalp meg masse!

    Men det kommer bare opp meny på denne måten:

    Hjem
    Om siden
    Om meg
    Kontakt

    Ser at flere har slitt med dette og fÃ¥tt hjelp, problemet er bare at svarene med hjelp ikke vises her. Første innlegg stÃ¥r spørsmÃ¥let, neste innlegg stÃ¥r det “tusen takk, det funket!” altsÃ¥ fÃ¥r jeg ikke lest hvordan de løste det. Noen som kan hjelpe meg? Hvordan fÃ¥r jeg opp “knappene”?

  17. Astrid says:
    14. februar, 2010 klokken 02:11

    Hei! Jeg fikk det til, men lurer på en liten ting. Hvordan får jeg det helt ut til kantene av bloggen? Hjelp meg pleaase! takk

  18. emma jensen says:
    17. februar, 2010 klokken 21:39

    Hei :)

    Jeg har fått menyen, men den kommer loddrett sånn her:
    Hjem
    Om siden
    Om meg
    Kontakt

    hvordan får jeg den vannrett? :)

    Svar så fort som mulig (på bloggen min!)

  19. Tronds says:
    17. februar, 2010 klokken 22:34

    Emma: Dette betyr at du har glemt å putte inn noe i stilsettet, eller du har en feil der.

    Vanskelig å svare på bloggen din når du ikke legger igjen adressen ;)

  20. hoda says:
    22. februar, 2010 klokken 14:22

    hallo, jeg har gjort alt men når jeg trykker på menyen kommer det at den ikke eksisterer

  21. hoda says:
    22. februar, 2010 klokken 19:01

    hallom jeg trenger hjelp til bloggen siden når jeg lager meny kommer den ikke fram kunne du hjelpe meg:)

  22. Susann says:
    23. februar, 2010 klokken 21:17

    Jeg har brukt koden til menyen men menyen blir bare blå og jeg klarer ikke å få den i den fargen jeg vil ha, kan du hjelpe meg ??

  23. hoda says:
    24. februar, 2010 klokken 15:50

    hallo det eer meg hoda igjen kunne du hjelpe meg med bloggen trykket på maler og tok bort nesten all koden som var deg og nå er bloggen min helt klikk kunne du legge igjen en komentar om hva som har skjedd med den?

  24. Lina says:
    26. februar, 2010 klokken 00:05

    Hvordan får jeg midtstilt menyen, og bestemt hvor bred den skal være? :-)

  25. Henriette says:
    26. februar, 2010 klokken 18:44

    Jeg lurer på en ting. Hvordan kan jeg få menyen i menyen. Litt vanskelig å forklare, men det er ingen koder på det. Jeg har lett overalt! At menyen skal være inne i menyen på høyre side. Typ som denne menyen på http://www.whoot.blogg.no

    Hadde vært veldig fint med hjelp!: )

    -Henriette

  26. Ida says:
    12. mars, 2010 klokken 17:59

    Hei:) Kan du legge meg til på msn og hjelpe meg med min blogg? Hadde vært kjempe snilt:)
    Mvh Ida

  27. markert says:
    14. mars, 2010 klokken 17:18

    Hei!
    Jeg har klart å følge oppskriften, men nå vet jeg ikke hvordan jeg skal få tilgang på de sidene altså på kontakt siden - hvordan skal jeg skrive på den?

    DÃ¥rlig forklart!

  28. tiira says:
    26. mars, 2010 klokken 11:02

    takk for hjelpen : )
    men du? vet du hvordan du får menyen opp og vedsiden av headeren?

  29. hoda says:
    25. april, 2010 klokken 20:02

    hej, jeg finner ikke på maler kunne du hjelpet meg?

  30. ineececiliee ♥ - KOMMENTERER TILBAKE says:
    1. mai, 2010 klokken 12:42

    jegh har en prikkete strek under headeren min, hvordan fjerner jeg den. det er veldig irr.
    :( svar gjerne på bloggen min så jeg ser der <3

  31. Stine says:
    21. mai, 2010 klokken 19:08

    Hei. jeg har ei venninne som fikset og rotet med designet mitt, og nå er menyen min og alt helt nederst på bloggen. Jeg skulle gjerne ha flyttet den opp igjen, men jeg ANER ikke hvordan jeg får den dit, og jeg finner ikke noen html-koder som fungerer så jeg får flyttet den opp.
    Om du svarer på mail, blogg eller her er ett fett. Men om du kunne hjulpet meg hadde jeg blitt utrolig taknemlig (:

  32. Ragnhild Isabella says:
    13. juni, 2010 klokken 02:03

    Hei, jef får ikke dette helt til.
    Får ikke selve bakrundsfargen i en hel farge, blir bare en tykk strek på menyen, også når jeg legger musen over flytter innleggene mine seg. Får også ikke til de runde kantene helt, samt krympe størrelsen på menyen..

    isabellasr1@gmail.com

  33. Victoria Venbakken says:
    20. juni, 2010 klokken 22:27

    Hei! Hvordan får man arkiv og kategorier som egne linker i menyen under headeren? Er det noen enkel kode for det, eller må man bare ta link til hver eneste måned og kategori og sette det sammen i et innlegg? Vær så snill å svare om du vet eller ikke :-)

  34. Karina Jean says:
    26. juni, 2010 klokken 01:50

    Hello! Først, du er til stor hjelp, og med kodene dine har du gjort jobben MYE enklere for meg. Tusen takk! Men jeg har et problem.. Jeg har meny under headeren, men den vises bare når man er inne på selve bloggen, og blir borte om du går inn på ett spesielt innlegg. Er det noe måte å få headeren til å være der hele tiden? Takk for svar. :)

  35. Anette Knutsen Finstad says:
    28. juni, 2010 klokken 15:41

    Alle kategoriene kommer bare under hverandre! :(
    Ser det er flere som har slitt med det, kan du forklare meg hvordan jeg får fiksa det? ;\

    - anetteeettena.blogg.no

  36. Lisbeth says:
    4. juli, 2010 klokken 21:08

    Jeg forstod ikke helt hvordan man skal få til runde kanter på menyen jeg. Setter pris på litt hjelp der =) Syns forresten at du har mange bra og spennende koder ;)

  37. cathrine says:
    15. juli, 2010 klokken 15:07

    jeg har gjort alt som du sa, men når jeg er på bloggen min så er menyen sånn her:

    * Hjem
    * Om meg
    * Kontakt
    * Facebook

  38. therese birkeland says:
    29. juli, 2010 klokken 11:33

    hvor endrer jeg mellomrommet mellom menyen og selveste bloggen ? for pÃ¥ enkelte pc’er sÃ¥ ligger menyen min under resten av bloggen for den er for brei , men jeg vil ha den mer til venstre .. :)

« Older Comments

Legg inn et svar


Jeg ønsker selvfølgelig at du legger inn en kommentar, men jeg ønsker kommentarer på det jeg skriver over her.
Hvis jeg har skrevet noe dumt eller hel teit på bloggen din så svar gjerne her.
MEN ta deg tid til å lese gjennom det jeg også har skrevet da. Legg gjerne igjen en kommentar på det :)
Click here to cancel reply.

« Blogg.no hacket ?
Design: Favicon? »
Følg meg!
  • Legg meg til som venn

    Er du en blogg.no bruker så har du muligheten til å legge meg til som venn. Blir enklere å følge meg. Når jeg føler for det tilbyr jeg også å lage design til tilfeldige personer som er har lagt meg til som "venn". Om du har 1 eller 10000 lesere har ikke noe betydning.

  • Siste innlegg

    • Bloggpause? neida, et litt opphold.
    • En liten preview av designverktøyet.
    • Lag ditt eget design enkelt
    • Bloggtrafik.nu merkelig poengsystem
    • Slik ser det ut hos meg nÃ¥!
  • Siste kommentarer

    • therese birkeland til Design: Meny
    • Martine til Design: Favicon?
    • Martine til Design: Favicon?
    • Martine til Design: Favicon?
    • Hjørdis Isabell til Design: Fjern “sisteinnlegg” “kategori” “Arkiv” fra sidemenyen
  • Emner

    backup Design Hva er best KRIK nerd opplevelser tur youtube zargate Andre blogger (2)
    Bakgrunn (2)
    Bilder på nettet (1)
    Blogg (55)
    blogg.no (7)
    CSS (3)
    Design (22)
    Design bygger (2)
    Design forbedringer (5)
    Dyrene (1)
    Familie (8)
    Favicon (1)
    Ferie (1)
    Firefox (2)
    Forbedringer (2)
    Gratis Design (3)
    Header (1)
    html/css (7)
    Hva er best (1)
    Hverdag (1)
    Hvordan gjør de det? (2)
    IKEA (2)
    Ipod touch (2)
    Jobb (4)
    Just for fun (20)
    Kommentar (3)
    KRIK (3)
    Lenker (6)
    Lister (1)
    Lurer på (3)
    Mat (6)
    Meny (3)
    Merkelig (1)
    mote (2)
    Musikk (3)
    Nerding (19)
    nyttige sider (2)
    Onlinetools (1)
    opplevelser (5)
    Personlig (14)
    Produkt (2)
    Siden (3)
    Slik er jeg (1)
    Surfende (1)
    Tanker (11)
    Tatovering (1)
    Tech (4)
    Ting som skjer (4)
    Trening (2)
    Uncategorized (1)
    Wordpress (1)
    youtube (2)

    WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.

  • Bloggrull

Alt har en begynnelse… is powered by WordPress
Theme Design by Generic Designer

Entries (RSS) and Comments (RSS)
Bloggurat