Navigation Bar Cara Whitey Mommy

Ada sesiapa berminat nak buat navigation bar macam saya? hm... ni 1st tutorial... macam best je tengok blog yang ada tutorial... jadi saya pun nak buat jugak tak malu

Saya guna template yang betul2 kosong hanya ada side bar sahaja... jadi kena outer sendiri kalau nak ala2 canggih! ok jom mula

1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tick pada kotak: Expand Widget)
-Pastikan backup template anda dengan tekan Download Full Template...
Ini Penting ya!

3. Tekan CTRL+F untuk memudahkan anda mencari kod . Masukkan kod ]]></b:skin> kedalam kotak Find dan tekan Enter

4. Copy Kod yang berwarna Merah dibawah dan Pastekan diatas atau sebelum kod ]]></b:skin>

#nav {
font-size:13px;
height:40px;
background:#D2D2D2;
}
#nav ul{
list-style:none;
}
#nav li a {
color:#000;
display:block;
float:left;
padding:10px 0px 0px 30px;
}
#nav li a:hover {
text-decoration:underline;
}

*kod yang saya boldkan dengan warna biru itu.. boleh ditukar mengikut warna kesukaan anda...
kod warna boleh didapati disini...


5. Kemudian, Copy dan pastekan kod <div id='content-wrapper'> kedalam kotak Find. tekan Enter.

6. Copy kod yang berwarna purple dibawah ini dan pastekan diatas atau sebelum kod <div id='content-wrapper'>

<div id='nav'>
<ul>
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='masukkan link anda' title='nama link'>title</a></li>
<li><a href='masukkan link anda' title='nama link'>title</a></li>
<li><a href='masukkan link anda' title='nama link'>title</a></li>
</ul>
</div>

contohnya :<li><a href='http://whiteymommy2.blogspot.com' title='Exchange Link'>Exchange Link</a></li>

ok! anda boleh preview dan kalau tiada error boleh save... =)

Ini Bonus!

Jika anda berminat nak letak gambar atau tulisan macam saya tu pun boleh...

masukkan kod dibawah pada Title

<img border='0' src='url gambar anda'/>

Contohnya: <li><a href='masukkan link anda' title='nama link'><img border='0' src='url gambar anda'/></a></li>

*tulisan macam saya tu boleh reka sendiri dengan menggunakan perisian photoshop atau generate kat sini... kemudian uploadkan gambar tulisan di laman web photobucket untuk mendapatkan kod url gambar anda...

sebelum Save pastikan Preview dulu dan jika tiada error boleh save dengan jayanya...

Selamat Mencuba...

Whitey Note: Pastikan kod di Copy dan Paste dengan tepat untuk mendapat hasil yang memuaskan... berjaya atau tidak sila tinggalkan komen pada saya ya... sebab tutorial ini saya buat sendiri...