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:
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:
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:
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:
Untuk keterangan, tulisan yang berwarna, tepatnya:
Untuk penempatannya seperti tadi, lebih jelasnya seperti di bawah ini...
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!!!
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>
<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>
<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>
<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>
<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:
- 250px menunjukkan lebar menu dropdown
- #ff0000 menunjukkan warna tulisan
- 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>
<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!!!
