Cara Membuat DropDown Menu
DropDown Menu atau menu dropdown adalah menu yang berisikan link yang bisa digunakan untuk link yang mengarah ke blog kita maupun ke web lain.
bisa kita gunakan untuk tempat friends list atau kumpulan link teman2 kita, ataupun link menuju website/situs yang kita sering kunjungi.
berikut cara pembuatannya :
Hasilnya akan seperti ini :
Ini adalah kode menu dropdown yang beda dengan yang diatas kode dibawah ini dibagi menjadi 2 :
contoh :
Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:
Contoh :
Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:
Gantilah tulisan yang berwarna biru dengan link yang diinginkan.
Adapun tulisan yang berwarna merah adalah tulisan/nama dari link yang berwarna biru tersebut.
Ket : Kode <center> dan berakhiran </center> adalah agar dimaksudkan berada di posisi tengah pada menu atau sidebar tempat kita menaruh dropdown menu ini.
dan juga bisa dipakai untuk semua kode html maupun java script.
bisa kita gunakan untuk tempat friends list atau kumpulan link teman2 kita, ataupun link menuju website/situs yang kita sering kunjungi.
berikut cara pembuatannya :
- Login ke Blogger
- Kemudian klik Tata Letak dan Elemen Halaman
- Ketika sudah berada di Elemen Halaman klik Tambah Gadget
- Lalu pilih HTML/JavaScript
- Langkah selanjutnya masukkan kode DropDown Menu seperti contoh dibawah ini :
<form><select name="menu" onchange= "window.open(this.options[this.selectedIndex].value,'_blank')" size=1 name=menu>
<option>- My Friend's Links -</option>
<option value="http://adesyams.blogspot.com/">Ade'S Tricks</option>
<option value="http://id-fans.blogspot.com/">Irvan'S Diary</option>
<option value="http://ikkefransiska.blogspot.com/">Ikke's Blog</option>
<option value="http://gieciencute.blogspot.com/">Blog Icha</option>
</select></form>
Hasilnya akan seperti ini :
Ini adalah kode menu dropdown yang beda dengan yang diatas kode dibawah ini dibagi menjadi 2 :
- kode menu dropdown yang apabila di klik tidak membuka halaman/tab baru ( mengganti halaman tersebut dengan link yang baru di klik )
contoh :
Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:
<center><select onchange= "document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"> Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>
- kode menu dropdown yang apabila di klik akan membuka halaman/tab baru
Contoh :
Cara membuatnya hampir sama tinggal masukkan kode berikut dibawah ini ke dalam HTML/JavaScript.
kode untuk pembuatan menu seperti di atas adalah:
<center><select onchange= "javascript:window.open(this.options[this.selectedIndex].value;">
<option value="0" selected="selected">- My Favorite Links -</option>
<option value="http://www.blogger.com/"> Blogger.com </option>
<option value="http://www.google.com/"> Google.com </option>
<option value="http://www.gmail.com/"> GMail (google mail) </option>
<option value="http://www.yahoo.com/"> Yahoo! </option>
<option value="http://www.mail.yahoo.com/"> Yahoo Mail </option>
<option value="http://www.facebook.com/"> FaceBook.com </option>
<option value="http://www.gudanglagu.com/"> GudangLagu.com </option>
<option value="http://www.4shared.com/network/search.jsp"> 4Shared.com </option></select></center>
Gantilah tulisan yang berwarna biru dengan link yang diinginkan.
Adapun tulisan yang berwarna merah adalah tulisan/nama dari link yang berwarna biru tersebut.
Ket : Kode <center> dan berakhiran </center> adalah agar dimaksudkan berada di posisi tengah pada menu atau sidebar tempat kita menaruh dropdown menu ini.
dan juga bisa dipakai untuk semua kode html maupun java script.
Semoga Berhasil
pertamax...
BalasHapusinfo yang mantab sob...kuambil dulu buat koleksi variasi blog...
lagi cari drop down menu ky gini, trims banget.
BalasHapusterima kasih atas infoya
BalasHapusSiip deh...thanks ya..
BalasHapussmua informasinya ok..ok...jdi pengen bikin n diterapin blog gw....thank's
BalasHapusthanks bgt, infonya sangat3x berguna buat pemula seperti saya. ehm, kalo sempat, kunjungi wapsite saya yah' http://twizter.xtgem.com.
BalasHapusdi sana udah saya pasang drop down menu (hasil nyontek dari sini, hehe..)
makasih ya
BalasHapusoke siap diterapkan.. mkasih
BalasHapussudah diterapkan, trima kasih.
BalasHapusitu combo box ap drop down bos?
BalasHapuslumayan buat tambahan ilmu
BalasHapusmantap bro emang lagi nyari tapi kalau bisa yang buat daftar judul diatas yang di klik kewabah kalau tau minta infonya
BalasHapusTrimakasih...karena lagi pingin bikin blog buat perusahaan dan bingung gimana biar menu yang banyak itu bisa diakalin....
BalasHapusmasukkin linkku donk.... plizzz
BalasHapusakatsuki-loverz.co.cc atau akatsuki-loverz.blogspot.com ya bos.... plizz....
thanks Saudaraku yg baik hati
BalasHapussalam
Dari Timor Leste....
thanks Saudaraku yg smart
BalasHapusSalam
Dari Timor Leste
wah...boleh di coba nich....Terima kasih Gan....
BalasHapussalam kenal.....
keren info bagus nihh coba ahh, moga aja berhasill
BalasHapusk aq mau tnya cara membuat drop down bisa ad di antara artikel gimana...aq gak tau...
BalasHapusdr dulu aq nyari gak ad...
kk aq mohon nnty jwbnya ke blog aq ya....
aq mohon...
boleh dicoba nh,,,,
BalasHapusthanks sobat
mantap gan...... saya mau nanya cara buat sub halaman gimana ya,,,,,,,,,,
BalasHapusthank gan...
BalasHapuskunjungi blog ane juga
otobiazza.blogspot.com
Ass. Makasih banyak, pencerahannya mempercantik tampilan blok, mohon izin copy, Wassalam
BalasHapusthanks banget gan.....
BalasHapusini yg gw cari2 buat di web gw. akhirnya nemu juga...
bermanfaat bner ini buat ane gan, semoga buat yg lain juga bisa bermanfaat,,,, :D