Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Membuat Menu Dropdown Dan Variasinya

Apakah kalian sudah tahu apa itu Dropdown menu? saya harap kalian sudah mengetahuinya. Bentuknya seperti ini:



Menu ini digunakan untuk menyimpan link-link, tapi bisa juga digunakan untuk mengisi daftar menu lainnya sesuka Anda sebagai penggunanya. Bagaimana caranya untuk membuat menu ini? Jika sudah tidak sabar, ayo kita lirik bagaimana caranya...

Untuk membuatnya, Anda tinggal copy kode berikut:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">

<option> - My Blogs - </option>

<!-- Ganti Link dengan Milik Anda -->

<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>

<option value="http://ardi33.web.id">http://ardi33.web.id</option>

</select></form>

Warna Merah adalah URL/Alamat Link
Warna Biru adalah Anchor Text/Tulisan yang akan tampil

Ganti tulisan berwarna dengan URL dan anchor text Anda. Untuk lebar, akan disesuaikan dengan tulisan yang paling panjang. Contoh lainnya adalah:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">

<option> - Semua Blog yang Dimiliki Ardi33 - </option>

<!-- Ganti Link dengan Milik Anda -->

<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>

<option value="http://ardi33.web.id">http://ardi33.web.id</option>

</select></form>


Perhatikan Judul yang sudah saya ubah, saya sengaja mengubah judul lebih panjang supaya menu dropdown menjadi lebih lebar. Dan hasil kedua contoh tersebut adalah seperti di bawah ini:



Nah, untuk menyamakan lebar kedua menu di atas yang tidak sama, kita tinggal menambahkan kode style="width:250px" dan akan ditempatkan pada kedua menu dan penempatannya bisa Anda lihat pada data berikut:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:250px">

<option> - My Blogs - </option>

<!-- Ganti Link dengan Milik Anda -->

<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>

<option value="http://ardi33.web.id">http://ardi33.web.id</option>

</select></form>

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:250px">

<option> - Semua Blog yang Dimiliki Ardi33 - </option>

<!-- Ganti Link dengan Milik Anda -->

<option value="http://die-silver.blogspot.com">http://die-silver.blogspot.com</option>

<option value="http://ardi33.web.id">http://ardi33.web.id</option>

</select></form>

Dan hasilnya dapat Anda lihat yaitu seperti ini:



Nah, tampak lebih rapi bukan? Mau tahu variasi lainnya yang bisa kita tambahkan? Variasi lainnya adalah membuat tulisan dan background di dalam menu tersebut. Anda hanya membutuhkan kode berikut ini untuk menghasilkan variasi ini:
style="width:250px;color:#ff0000;background:#B2DDFB"

Untuk keterangan, tulisan yang berwarna, tepatnya:
  1. 250px menunjukkan lebar menu dropdown
  2. #ff0000 menunjukkan warna tulisan
  3. dan #B2DDFB menunjukkan backgroun menu


Untuk penempatannya seperti tadi, lebih jelasnya seperti di bawah ini...
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:250px;color:#ff0000;background:#B2DDFB">

<option> - Semua Blog yang Dimiliki Ardi33 - </option>

<!-- Ganti Link dengan Milik Anda -->

<option value="http://die-silver.blogspot.com" style="width:250px;color:#ff0000;background:#C3F4BD">http://die-silver.blogspot.com</option>

<option value="http://ardi33.web.id" style="width:250px;color:#ff0000;background:#CDDCE7">http://ardi33.web.id</option>

</select></form>

Dan hasilnya akan terlihat seperti ini:


Bagaimana untuk yang satu tadi? Jadi lebih bagus lagi bukan? Pusing saya membuat posting ini, terlalu banyak kode-kode :)) hehe... Tapi kalau ada kemauan Pasti Bisa!!!

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com
Gunakan Tombol berikut untuk menyimpan halaman :
Membuat Menu Dropdown Dan Variasinya
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

5 comments:

akane July 28, 2009 at 12:48 PM  

wekz....
makasih kak infonya...
aku nyari" lum dapet nhe...
aku coba dech...
^^

akane July 28, 2009 at 1:00 PM  

kak lau mau ada judulnya gmn...
misalnya:

::A::
akane
agito
::B::
ben-ben
dst......

tu gmn...
ditunggu jawabannya secepatnya...
^^

ardi33 July 28, 2009 at 7:37 PM  

tinggal diganti aja kan judulnya?
yang dipake di tutorial ini kan pake judul:
- Semua Blog yang Dimiliki Ardi33 -
Tinggal ganti aja...

ajencianah August 7, 2009 at 3:18 AM  

:a:

tetep gagaaal (kira2 apa ya yang salah???)...tapi anyway blog nya kerrrreeen...

:n: nanti ajarin aku bikin blog sekeren ini yaaaa

NB:
tukeran link yu,,,(tetteeeep :g: )

ardi33 August 7, 2009 at 11:37 PM  

hehe..oke..dengan senang hatiii

Post a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongi atau dapat juga diganti dengan email anda.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik anda gunakan pilihan dibawah ini:

Jika ingin komentar anda tidak dipublikasi, silahkan klik disini.

Terima kasih, komentar anda sangat berarti untuk die-silver.blogspot.com
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:

newer post older post home

About Me

My Photo
ardi33
Sangat bercita-cita menjadi seorang webmaster yang selalu dapat memberikan yang terbaik dan bermanfaat kepada semua orang, dan sekarang sedang dalam tahap pembelajaran yang tak kenal lelah!!!
View my complete profile

Stats

Blog Rank:Powered by  MyPagerank.Net
Traffic Rank:Alexa Certified Site Stats for http://die-silver.blogspot.com
Online Visitor:
Blogger Template by Ardi33.Web.id.
Originally Die Silver Template Edited by TemplateZone