Tinta Hati: TUTORIAL : Navigation Bar

Wanted : Do not copy

Assalamualaikum.. And saranghaeyo !!

Hari ni Afie nak ajar korang buat navigation bar macam ni..

Afie dapat tuto ni dari ---> Adik chumell

Jom kita sama-sama letak dekat blog..

Step 1 : Dashboard > Template > Edit HTML > Tekan CTRL+F secara serentak and korang cari kod ni

]]></b:skin>

Step 2 : Kalau korang dah jumpa korang copy code kat bawah ni and letakkan di atas code yang korang search tadi

/* menu bar */
#menubar{
margin: 0;
padding: 6;
float:center;
border:0px solid #ffffff;
width:90%;
background:#ffffff;
}
#menubar li{
margin-left: 0;
padding: 5px;
list-style: none;
float: left;
font: bold 14px arial;
}
#menubar li a{
display: block;
margin: 0;
padding: 10px 10px;
background:#F5A9E1;
border:4px solid #fe5799;
color: #fff;
text-align: center;
text-decoration: none;
}
#menubar li a:hover{
background:#F5A9E1;
color: #fff;
text-align: center;
border:4px solid #F781D8;
text-decoration: none;
}
#menubar div{
position: absolute;
visibility: hidden;
}

Step 3 : Preview dulu. Kalau tak error, korang save lah.

p/s :
Biru : Warna backround
Pink : Warna untuk hover pertama
Merah : Warna untuk hover ke dua. Cari warna di ---> SINI

Step 4 : Lepas korang save korang pergi ke Layout > Add a gadget > HTML / Javascript

Step 5 : Copy and pastekan kod ni di ruangan HTML tu.

<br/><ul id='menubar'><center>
<li><a href='http://www.blogger.com/home'>DASHBOARD</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>HOME</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>TUTORIALS</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>FREEBIES</a></li>
<li><a href='LETAK LINK ANDA DI SINI'>HIRE ME</a></li>
</center></ul>

Step 6 : Save and tengok lah navigation comel kat blog korang.

p/s :
Ungu : Link yang korang nak letak.
Merah : Ikut koranglah nak letak apa.

Selamat mencuba. Kalau dah cuba tu jangan lupa komen yaa..