Jeg kom godt i gang med disse menyene, og slenger like godt ut en til - med litt variasjonsmuligheter.
Menyen vil se slik ut:

..og når du holder musepekeren over blir det slik:
Før vi starter, vil jeg gjerne at du i et innlegg skriver litt info om deg selv. Om du ikke har det, kan du enten lage et nytt innlegg der du skriver om deg selv, eller omgjør et eldre innlegg til dette formålet. Når dette er gjort, lagrer du url-adressen til dette innlegget, det skal inn i HTML-koden for menyen din. Url-adressen er den linjen som står i adresselinjen helt oppe - der det mest sannsynlig står
http://thehibi.blogg.no/xxxxxxxx nå. Når du går inn på din blogg, og finner frem til innlegget der du har skrevet om deg selv, blir altså det som står i adresselinjen når du er inne på det innlegget. Du trenger også en side med kontakt - denne lager du eller omgjør på samme måte som innlegget der du har skrevet om deg selv. Noter url-adressen til begge sidene.
For å få menyen inn slik at det ikke blir forvirring, er det viktig at HTML-koden legges inn i
alle malene - dvs i malene for forside, innlegg, kategori
og arkiv. Dette blir det mest profesjonelle resultatet.
Vi legger først inn CSS som hører til menyen.

Bla til nederst i stilsettet ditt og legg inn denne koden
#meny li img:hover {
background: #ff0000;
Start HTMLDenne guiden som kommer under må du altså gjøre fire ganger - en gang per mal. Du gjør det samme i alle malene.
Så da er det bare å starte:
Vi går først til malene for forside:

Søk (Ctrl+F) opp følgende:
<div id="wrapper" class="yui-gc"> Under dette legger du til denne HTML-koden:
<ul id="meny" >
<div align="center"><li>
<a href="http://blogg.no/"><img src="http://i42.tinypic.com/v8kapx.jpg" alt="Blogg.no" width="190"></a>
<a href="${BlogUrl}"><img src="http://i41.tinypic.com/15s78fc.jpg" alt="Forside" width="190"></a>
<a href="${ProfileUrl}"><img src="http://i41.tinypic.com/2ag9n2r.jpg" alt="Profil" width="190"></a>
<a href="LINK TIL INNLEGG OM MEG"><img src="http://i39.tinypic.com/148i62d.jpg" alt="Om meg" width="190"></a>
<a href="LINK TIL KONTAKT"><img src="http://i41.tinypic.com/10yl5pl.jpg" alt="Kontakt" width="190"></a>
</div></ul>
Nå får du bruk for url-adressen til det innlegget du tidligere skrev om deg selv. Den uthevede skriften (KUN UTHEVET!!)
LINK TIL OM MEG, fjerner du, og erstatter med url-adressen til innlegget der du har skrevet om deg selv. Så fjerner du det uthevede
LINK TIL KONTAKT og erstatter med url-adressen til siden der du skrev om hvordan man kan få kontaktet deg.
Du kan nå forhåndsvise - er du tilfreds - lagre. Er det noe som ikke stemmer - sjekk om du har fått fjernet gåseøynene som hører til linken til dit du har skrevet om deg selv. Det skal være gåseøyne ( " " ) der!
Har du nå gjort dette en gang: Gå så til malene for innlegg og gjør så om igjen alt etter
Start HTML.
Har du nå gjort dette to ganger: Gå så til malene for kategori og gjør så om igjen alt etter
Start HTML.
Har du nå gjort dette tre ganger: Gå så til malene for arkiv og gjør så om igjen alt etter
Start HTML.
Har du nå gjort dette fire ganger: FERDIG! Gratulerer med egen meny! :)
Er det ikke disse knappene du ønsker? Bytt dem ut da vel! Koden for en knapp er mellom
<a href= og
</a> så vil du fjerne en knapp, fjerner du fra det første nevnte, og til og med den første
</a> som kommer etterpå.
Hvis du for eksempel ikke vil ha knappen "Kontakt" fjerner du denne koden, og erstatter med en annen (vist under):
<a href="LINK TIL KONTAKT"><img src="http://i44.tinypic.com/wvwf1c.jpg" alt="Kontakt" width="190"></a>Hvis du vil ha denne knappen, erstatter du den koden du fjernet med denne:

<a href="LINK TIL DIN BLOGG PÅ BLOGLOVI'N"><img src="http://i43.tinypic.com/wgorqo.jpg" alt="Bloglovi'n" width="190"></a>

<a href="LINK TIL NETTBUTIKK"><img src="http://i44.tinypic.com/15ybva.jpg" alt="Nettbutikk" width="190"></a>

<a href="LINK TIL OM OSS"><img src="http://i39.tinypic.com/ka0i0g.jpg" alt="Om oss" width="190"></a>
Good luck!