Tips: Tutorial Buat Tab Menu / Navbar Menu

Rasanya korang penah tengok kot Tab Menu / Navbar Menu seperti kat bawah nie kan.....

Ok kali nie dalam ruangan TIPS BLOGGER aku nak bagi kat korang semua tutorial macam mana nak buat Tab Menu / Navbar Menu seperti kat atas nie. Sebenarnya Tab Menu / Navbar Menu nie bagus untuk korang letakkan dalam blog at least semua link-link penting atau feveret link yang selalu jadi perhatian visitor boleh diakses dengan mudah.

So macam mana nak buat yer. Meh tengok tutorial seperti kat bawa nie:-

1. Dari dashboard > design > edit html
(backup template terlebih dahulu sebagai langkah keselamatan kalau tak jadi nanti leh guna template yang dah dibackup)

2. Menggunakan fungsi find (ctrl + F), korang cari kod ]]></b:skin>

 
2.1 Kalau tak jumpa, korang cari kod nie </head>

3. Copy dan paste kod kat bawah nie SEBELUM kod yang korang jumpa 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.:

4. Save template korang

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

6. Copy dan paste kod kat bawah nie masukkan dalam HTML/javascript 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>

Note: Tukarkan 'Link' dengan link yang anda mahu letak di tab menu.
Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>

7. Then korang drag ke bawah element header, save leh tengok contoh kat bawah nie

Nota 1: Untuk langkah 3, korang leh set beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang korang nak.

Nota 2: Untuk langkah 6, gantikan 'Link' dengan link yang nak korang letak dan boleh tukar nama untuk 'Home' , 'About' dan seterusnya.

Nota 3: Jika korang nak tambah tab menu, copy paste barisan di langkah 6.

Selamat mencuba.

Posted in: Tips Blogger