Tuesday, July 12, 2011
[TUTORIAL] Buat Tab Menu / Navbar Menu @ 10:11:00 PM | 0 talkative person(s)
ok , so next tutorial is camne nak buat Tab Menu / Navbar Menu seperti gambar diatas .
Steps :-
1) Dari Blogger Dashboard -> Design -> Edit HTML .
(sila buat backup template terlebih dahulu in case kalau nak undo changes (: )
2) Tekan ctrl+F , dan cari code ]]></b:skin> .
2.i)Jika tidak jumpa , cari code </head> .
3) Copy dan paste code dibawah sebelum kod yg diberikan diatas .
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 dibawah ke 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)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 dan paste barisan di langkah 6.
Happy blogging , :)
Labels: Tutorial
