Tutorial : Navigation Bar ( Tab Menu ) Macam Blog Saya

Assalamualaikum dan Salam 1 Malaysia

Ini contoh navigation bar

Ada orang request di chat. Thanks Afie. 

1. Dashboard > Template > Edit HTML > search code ]]></b:skin>

* Jika tak jumpa search code </head>

2. Dah jumpa ? Copy code dibawah ini dan pastekan di atas atau sebelum code yang korang cari.

 /* 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;
}

Nota kaki :

• Biru : Background 
• Pink : Hover pertama
• Merah : Hover kedua 

contoh gambar

3. Save !

4. Dashboard > Layout > Add A Gadget > HTML / JavaScript 

5. Copy dan pastekan code dibawah di ruang HTML / JavaScript

<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>

Ungu : Letak link korang
Merah : Tukarkan tajuk yang korang mahu.

6. Save !

Faham tak ? Tak faham tanya di komen ye..  InsyaAllah saya akan bantu. = )