Tutorial : Simple and Cute Menu Tab

Assalamualaikum w.b.t kawan-kawan :)

Ini merupakan tutorial Emma yang ke-berapa entah. Tak kira pulak hehehe. Okay, Emma nak tutor uolls macam mana nak buat Menu Tab yang simple tetapi cute. Macam ni :

It's okay kalau uolls kata tak comel pun hihihi. Emma nak jugak buat tutor XD

Mula-mula, kena buat page dulu tau. Contohnya, About Me, Tips, Tutor dan sebagainya. Sekarang baru buat menu tab.

1. Dashboard > Layout > Add a gadget > HTML/Javascript.
2. Copy code bawah ni dan paste dekat dalam kotak tu.

<center><a class="menutab" href="URL BLOG UOLLS">Home</a>
<a class="menutab" href="URL PAGE ABOUT ME">About Me</a><a class="menutab" href="URL PAGE TIPS">Tips</a><a class="menutab" href="URL PAGE TUTOR">Tutor</a></center>

Nota Kaki :

OREN : URL blog dan blog page uolls.
HIJAU : nak tukar >Saya Comel!< pun boleh :)
Kalau nak tambah Menu Tab lagi, tambah je code ni betul-betul sebelum </center>

<a class="menutab" href="URL PAGE ABOUT ME">About Me</a>

3. Save!

Belum siap lagi lah. Sekarang macam mana nak cantikkan dia? Okay ikut step ni.

1. Template > Edit Html.
2. Tekan Ctrl+F serentak untuk cari code ni :

]]></b:skin>

3. Dah jumpa? Copy code ni. Paste kan dekat ATAS code ]]></b:skin> tadi.

a.menutab {
background:url(background url here);
display: inline-block;
font: normal 12px 'Lucida Sans Unicode', Lucida Grande, sans-serif;
color: #000;
border: 3px solid #CEF6F5;
display: inline-block;
letter-spacing: 1px;
margin: 0 2px 0 0;
padding: 5px 10px;
text-transform: uppercase;
}
a.menutab:hover {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border: 2px solid #CEF6F5;
background:url(background url here);
color:#000;
}

Nota Kaki :

PINK : letak background url uolls.
MERAH : code warna untuk border menu tab. SINI untuk mencari.
OREN : ketebalan border.
HIJAU : boleh tukar solid/dashed/dotted.

4. Preview dulu. Kalau dah puas hati, boleh lah SAVE! Yay!