Cara Membuat Tab Menu / Navbar menu

Mempunyai tab menu atau navbar menu dalam sebuah blog bisa digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog. contoh seperti dibawah ini 


Cara untuk membuat tab menu / navbar menu adalah seperti berikut.

1. Dari dashboard > design > edit html
( untuk  berjaga² silahkan anda backup terlebih dahulu template anda)

2. Menggunakan fungsi find (ctrl + F), cari kode ]]></b:skin>
2.1 Jika tidak ketemu, cari kode </head>

3. Copy dan paste kode di bawah ini  SEBELUM kode yang anda temui di langkah 2 @ 2.1

ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#FF0099;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
-moz-border-radius: 5px;
}

ul#list-nav li a:hover {
background:#FF6699;
color:#000
-moz-border-radius: 5px;
}

Contoh.:

Add caption

4. Save template anda.

5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript

6. Copy dan paste kode di bawah di dalam HTML/javascript kemudian tukarkan 'Link' dengan link yang anda mau letakan di tab menu.
Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>

Setelah selesai masukkan link yang diingini, kemudian save

<div>
<ul id='list-nav'>
<li><a href='Link'>Home</a></li>
<li><a href='Link'>About Us</a></li>
<li><a href='Link'>Services</a></li>
<li><a href='Link'>Products</a></li>
<li><a href='Link'>Contact</a></li>
</ul>
</div>

7. Drag ke bawah element header, save dan lihat hasilnya.:)






Nota 1: Untuk langkah 3, anda bisa ubah beberapa kode seperti warna background, border, dan radius. Tergantung kepada bagaimana tab menu yang anda inginkan.

Nota 2: Jika anda ingin tambah tab menu, copy paste barisan di langkah 6.


Selamat mencoba,,^_^