Tutorial simple Drop down Menu


Salam,

Tutorial ni dibuat sebab ade yg bertanya bagaimana nak buat Drop down menu seperti kat bawah header blog nih:

Drop down menu ni simple jer, tak guna js. file yg dihost kat luar pun. kalau kita search kat google ker, kebanyakan tutorial memerlukan kita download js. file dan kemudian kena upload kat website yg tawarkan host free ni, Bukan tak jumpa tutorial yg tak payah nak host sendiri js. file tu, ade tu ade tapi sebab dah 2 tahun guna code sekarang ni rasa tak perlu la nak tukar2, setakat ni tak de masalah lagi guna yg simple drop down menu ni.

Bagi yg nak try pakai Simple drop down menu ni, ada 2 cara:
  1. Kalau tak berapa yakin nak buat sendiri, Minta je la sape2 yg expert tolong buatkan, (gurau jer!!!)
  2. Bagi yg dah biasa dengan HTML boleh cuba cara kat bawah ni eik.
Langkah pertama

Cam biasa pergi ke Design > Edit HTML , Letakkan code dibawah ni sebelum perkataan ]]></b:skin>


Tulisan merah tu antara benda yg korang boleh tukar, contoh width, korang boleh letak ikut width header korang ker, background tu tukar la ke warna apa yg korang nak. Klau memang dah familiar ngan HTML byk benda yg korang boleh tukar tuk sesuaikan dengan blog korang, even nak letak gambar kulat cam saya tu pun boleh.

Langkah kedua
Letakkan code kat bawah ni sebelum perkataan </head>


Langkah ketiga Copy dan paste code dibawah:

selepas code </div> seperti dalam gambar kat bawah nih :
Kalau nak tambah sub menu untuk contoh 5 misalnya, cuma letakkan <li><a href='#'>Contoh 5c</a></li> sebelum </ul> <li><a href='#'>Contoh 5</a> <ul> <li><a href='#'>Contoh 5a</a></li> <li><a href='#'>Contoh 5b</a></li> <li><a href='#'>Contoh 5c</a></li> </ul>
</li>
Sekiranya ingin menambah menu lagi misalnya nak tambah contoh 6 misalnya, cuma tambah  <li><a href='#'>Contoh 6</a> <ul> <li><a href='#'>Contoh 6a</a></li> <li><a href='#'>Contoh 6b</a></li> </ul> </li> Sebelum  code berwarna hijau tadi (</ul>) Tukar # kepada link yg korang nak, cam saya letak link bagi labels entry kat blog nih, dan perkataan contoh 1, contoh 2 tu tukar la ikut suka korang eik. Langkah keempat Preview kalau dah puas hati save, nanti akan jadi seperti gambar kat bawah ni:
Psss: harap faham la eik tak pandai nak buat tutorial sebenarnya ;0) Bagi yg nak drop down menu yg lebih advance dan  bertingkat2 atau dipanggil multi-level drop down menu boleh tgk tutorial kat Sini. Contoh Multi-level drop down menu tu seperti gambar kat bawah ni.

3 comments:

  1. belog me pun buat drop down jugak :) rajin sharing tuto :)

    ReplyDelete
  2. Terima kasih sbb bagi tutorial yg berguna ini =D

    ReplyDelete
  3. nanti ade masa nak try buat... kena hati2 buat ni..

    yg Wp juga best.. sbb ala2 susun kotak jer... hehehheh..

    ReplyDelete