Tutorial: Cara Buat Tab Menu Simple Versi SF

August 01, 2015

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:




Kalau dah tahu Tab Menu tu apa, jom belajar cara membuat Tab Menu ni pulak. Ada 5 langkah mudah:


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




You Might Also Like

4 comments

This blog is my personal blog. All the writings and stories in this blog is mine unless was mentioned and stated in it.
Sila jaga bahasa dan tutur kata anda di sini. Dilarang menggunakan bahasa kasar dan kesat.
Sesungguhnya yang baik itu datangnya dari Allah dan yang buruk datangnya dari saya sendiri.
Terima kasih kepada anda yang sudi singgah dan komen di blog ni. I am always appreciate it ! :)