Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut.
1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)
2. Menggunakan fungsi find (ctrl + F), cari kod ]]></b:skin>
2.1 Jika tidak jumpa, cari kod </head>
3. Copy dan paste kod di bawah SEBELUM kod yang anda 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 anda.
5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript
6. Copy dan paste kod di bawah di dalam HTML/javascript kemudian tukarkan 'Link' dengan link yang anda mahu letak di tab menu.
Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>
Selepas selesai masukkan link yang dikehendaki,
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 boleh ubah beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang anda mahukan.
Nota 2: Jika anda hendak tambah tab menu, copy paste barisan di langkah 6.
Happy blogging.:)
0 komentar:
Posting Komentar