Tuesday, June 30, 2009

Tutorial Drop Down Menu

Tutorial kali ini merupakan link shortcut berpetak untuk meletakkan link blog, artikel atau apa saja link yang di inginkan. Ianya boleh digunakan sebagai widget dan saiz petak yang kecil dapat menjimatkan ruang di sidebar. Kelebihan tutorial kali ini bukan saja sebagai alternatif untuk membuat link, ianya juga dapat menampung sebanyak mungkin link yang ingin anda masukkan. Anda boleh merujuk pada gambar di atas di mana saya letakkan sebagai "Kategori Indah" di dalam blog saya sendiri.

Berikut adalah langkah-langkah untuk memasukkan Drop Down Menu pada pada.

1. Login ke ID Blogger atau terus ke Dashboard.

2. Pilih Layout kemudian ke menu tab Page Elements.

3. Klik mana-mana Add a Gadget kemudian Pilih HTML/Javascript.

4. Copy dan Paste code di bawah kedalamnya.

<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:184px" name="menu" size="1"><option selected value="0"/>Tajuk Utama</option>

<option value="Link1"/>Tajuk Link1</option>

<option value="Link2"/>Tajuk Link2</option>

<option value="Link3"/>Tajuk Link3</option>

</select>

*width:184px : Gantikan dengan lebar sidebar anda (mengikut kesesuaian)

*Tajuk Utama : Tajuk utama yang akan dipaparkan di dalam kotak.

*Link1 : URL link

*Tajuk Link1 : Tajuk yang akan dipaparkan di bawah tajuk utamamenu di dalam kotak

Contohnya:

<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:184px" name="menu" size="1"><option selected value="0"/>Blog Hangat</option>

<option value="http://ady.via.my"/>Sederhana Itu Indah</option>

<option value="http://imady.blogspot.com"/>Aku Dan Dirimu</option>

<option value="http://adykml.blogspot.com"/>KML Centre</option>

</select>

dan hasilnya adalah seperti ini



5. Anda boleh membuat lebih daripada 3 atau kurang dengan hanya memadam atau menambahkan code seperti dibawah.

<option value="Link1"/>Tajuk Link1</option>

6. Setelah selesai meletakkan dan mengubah code tersebut anda boleh SAVE dan lihat hasilnya.

Selamat Mencuba!

7 comments:

Seti@wan Dirgant@Ra said...

Ini perlu nih untuk menghemat tempat di blog, makasih yah Bang.

Seti@wan Dirgant@Ra said...

Senang rasanya bisa absen pagi2 dan membaca tutorial bang Ady.

Saichou said...

erm good one...

Felicia F. Ramzi said...

mekasih! berguna amat.. nak tanya..yang ni boleh guna ke tak untuk posting? maksudnya, kalau kita buat post kan, contohnya soalan Tag, tak nak guna space banyak, nak guna yang ni je, boleh ke ek?

seIndah maWar sehaRum naMamu... said...

salam...nk msukkn gamba dlm link 2 cne?? cthnye juz click kt gamba 2 je

Syafazaliza said...

hi... saya dah cuba.. berjaya.. terima kasih..
tapi saya ada soalan, macamana nak jarak kedudukan setiap kotak tu..? rapat sangat pula..

Asep Haryono said...

Hi I knew little about HTML code for DropDown Menu. I found your article is very useful and important as well. Thanks and I really appreciate it