Perhatian!
Tutorial ini adalah untuk sesiapa yang dah buat PAGE blog, tapi tak tahu macam mana nak masukkan dalam Tab Menu.
Apa khabar semua. Masak apa hari ni? Meh la kongsi resipi kat sini :D Sementara cari resipi tu, jom tengok cara buat tab menu yang simple versi SF. Bagi yang dah tahu duduk diam-diam je tau. Yang tak tahu lagi boleh baca sampai habis.
Apa fungsi Tab Menu? Tab Menu ni kalau taknak buat boleh, nak buat pun lagi bagus, sebab fungsi tab menu ni supaya blog atau website kita nampak lebih tersusun dan memudahkan kita mencari entri-entri yang lepas (selain menggunakan 'Search Box'). Biasanya tab menu ni kita letak di bawah header blog. Tapi ada jugak blogger yang letak di bahagian sidebar blog. Bergantung kepada korang nak letak kat mana.
Tab Menu tu macam dalam petak merah kat gambar di bawah ni:
1. Copy code dibawah dan paste ke dalam HTML/Javascript.
(Cara masukkan HTML/Javascript : Dashboard > Layout > Add a Gadget > Add HTML/Javascript)
<ul id='menubar'>
<li><a href='URL 1'>TITLE 1</a></li>
<li><a href='URL 2'>TITLE 2</a></li>
<li><a href='URL 3'>TITLE 3</a></li>
<li><a href='URL 4'>TITLE 4</a></li>
<li><a href='URL 5'>TITLE 5</a></li>
Nota SF:
Tulisan warna biru: Tukarkan kepada URL setiap PAGE yang korang dah buat sebelum ni.
Tulisan warna merah: Tukarkan kepada TAJUK setiap PAGE yang korang dah buat sebelum ni.
Seterusnya...
2. Pergi ke Dashboard > Template > Edit HTML
3. Cari kod ]]></b:skin> (Tekan CTRL + F serentak)
4. Copy kod di bawah dan paste di atas kod ]]></b:skin> yang korang cari tadi.
/* menu bar */#menubar{margin: 0;padding: 0;float:left;border:1px solid #ffffff;width:100%;background:#ffffff;}
#menubar li{margin: 0;padding: 0;list-style: none;float: left;font: bold 12px arial;}
#menubar li a{display: block;margin: 0;padding: 4px 10px;background: #ffffff;color: #69312C;text-align: center;text-decoration: none;border:2px solid #CE968E;border-right:2px solid #CE968E;}
#menubar li a:hover{background: #F9FCBB;color: #F5A249;border:2px solid #F5A249;}
#menubar div{position: absolute;visibility: hidden;}
Nota SF:
Tulisan warna ungu tu boleh tukar mengikut citarasa masing-masing.
Boleh pilih warna kesukaan korang >>> DI SINI <<<
5. PREVIEW dulu, bila takde error, boleh SAVE dan siap! :)
Terima kasih sudi singgah. Jumpa lagi. Bye :D
