Vanskelighets grad: Enkelt.
Da prøver vi oss på en meny til, det er stort sett noe alle ønsker.
Denne gangen her skal vi prøv å få til en slik meny. OG NEI det er ikke så vanskelig som du tror 
Passer ikke farge valget ? ikke noe problem du går nemlig inn på denne siden http://www.tabsgenerator.com/ og lager dine egne knapper, er gjort på 1-2-3. Last ned bildene til datamaskinen din, og last dem opp igjen på http://tinypic.com og laster det opp. Kopier ut adressen til bildet for det trenger du etter på.
NÃ¥r jeg sier “bildene” sÃ¥ holder det med et bilde ( en knapp ) men hvis du feks vil at den skal skifte farge nÃ¥r du holder musen over mÃ¥ du lage to bilder.
Først går vi inn i stilsettfilen, helt nederst i den setter vi inn koden under. Ta med deg alt
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 | .tsmenyfane{ float: left; width: 100%; margin-top: 20px; /* vi lagger et lite mellomrom opp til header, ser finere ut da */ margin-left: 10px; /* denne flytter menyen litt lenger inn på siden, litt forskjellig fra mal til mal */ background: transparent; /* sett denne til en fargekode hvis du vil ha en annen farge enn bakgrunnen på bloggen */ } .tsmenyfane a { display: block; /* denne må du ikke røre ;) */ padding-left: 10px; /* justerer teksen lenger mot høyre */ width: 130px; /* bredden på bildet du bruker som bakgrunn MINUS hvorlangt du velger å flytte inn teksten på linjen over */ padding-top: 10px; /* justerer teksten lenger ned */ height: 30px; /* høyden på bildet du bruker som bakgrunn MINUS hvorlangt du velger å flytte ned teksten på linjen over */ background: url( http://i46.tinypic.com/2s68shf.png ); /* "knapp" bildet */ font-size: 20px; /* størrelsen på fonten */ color: #000; /* fargen på teksen */ margin-right: 10px; /* hvor stor avstand du skal ha mellom knappene */ float: left; text-decoration: none; /* sier bare at det ikke skal være linje under linken */ } /* delen under forandrer bildet når du holder musen over, hvis du ikke ønsker dette så fjern denne delen */ .tsmenyfane a:hover, .tsmenyfane .preload{ background: url( http://i49.tinypic.com/35a3thj.png ) no-repeat; /* knappen forandrer seg til denne når du holder musen over */ } |
Du ser at det er to forskjellige adresser til tinypic.com i koden over. Den første er til bildet som skal vises i menyen, det andre er til hvordan knappen skal se ut når noen plassere musen over. Sett inn linkene til de knappene du har fikset selv. Koden over passer til knapper som er 40 høy og 140 bredd, har du andre størrelser på knappene må du tilpasse koden over. Er ganske greit forklart så det skulle ikke være noe problem.
Lagre. Du skal ikke se noe forskjell på siden enda, hvis du gjøre det så har du gjort noe feil! Tilbake still designet og prøv igjen.
Når det er gjort så skal vi putte inn litt kode i malen . Det første du må gjøre er å finne linjen:
<div id=”wrapper” class=”yui-gc”>
Over den linjen limer du inn koden som står under her:
1 2 3 4 5 6 7 |
Lim inn alt. På linjen som det står LINKEN på kan du kopiere opp så mange ganger du vil, LINKEN byttes ut med adressen til innlegge/kategorien som du vil skal komme opp når noen trykker på NAVN. NAVN byttes ut med navnet du vil ha på knappen.
Trykk på forhåndsvisning.
Hvis du er fornøyd sÃ¥ lagrer du. For at menylinjen skal vises heletiden mÃ¥ den siste delen ogsÃ¥ limes inn i malene “innlegg”, “kategori” og “Arkiv”. Da tar du bare koden som du nettopp limte inn i malen og kopierer den inn i de andre.
Hvis det er noe du ønsker å forandre på å så se på linjene i stilsettet, har skrevet forklaringer på alle linjene. Noe du ikke får til å legg igjen en melding her så skal jeg sjekke det ut.
Lykke til
Sv; Takk ^^ å om eg trenger hjelp så kontakter eg deg!
sv: hehe, er verdt å være trøtt når man lærer mye nyttig!
sv: hm, sant! får nok komme meg i seng
Sv: TUUUSEN TAKK FOR HJLEPEN! Gud, det gikk faktisk. Du aaner ikke hvor takknemlig og glad jeg er nå! Jeg har slitt med det kjempe lenge, og jeg virkelig hatet at den var der nede. Nå er den kommet på riktig plass igjen, tuuusen takk igjen!
Forresten, virker de kodene som du skreiv i dette innlegget på blogg.no og?
Ja, det var sannelig noen fine knapper
hihi
Hvordan kan man lage sider de skal linkes til uten og publisere sidene på bloggen? Man må jo inn på siden som besøkende for å finne url men da må man jo også ha publisert innlegget?:s
hei , du kommenterte på bloggen min men eg forstod ikkje det .
eg prøvde å lage meny og gjor alt eg skulle men det går ikkje . eg prøvde 4 ganga og det gjekk forsatt ikkje .
Heisann!
Alt vel?:)
Hvordan kan man fÃ¥ helt eget design pÃ¥ knappene i menyen? At de fungerer som “bilder” man trykker pÃ¥. Er superenkelt design jeg vil ha, men fonten er litt annerledes fra default.
I samme sleng lurer jeg på hvordan man kan customize kommentarfeltene. Hvordan man får inn en email collector?
HÃ¥per du har en fin dag!
Siri