Hemat Ruang Dengan dropdown menu


My Friends


Mungkin anda bingung melihat awal dari posting ini berupa “combo box” atau yang lebih dikenal dengan “dropdown menu”. Mengapa saya memajang yang seperti itu? Anda tidak perlu bingung karena inilah yang akan menjadi bahan pembahasan pada postingan kali ini. Tapi sebelumnya baca ini dulu ya....


Blog bagi sebagian orang merupakan lahan untuk menghasilkan dolar lewat dunia maya. Beragam cara digunakan untuk membuat blog agar dikenal oleh banyak orang. Salah satunya adalah dengan cara saling tukar link dengan teman atau orang-orang yang sengaja diajak untuk bertukar link meskipun tidak saling kenal. Semakin banyak yang diajak untuk bertukar link semakin tinggi pula kesempatan untuk memperoleh Page Rank tinggi, tidak ketinggalan juga semakin banyak ruang yang dihabiskan untuk membuat deretan link-link tersebut.


Untuk menyiasatinya agar tidak banyak memakan ruang, anda dapat menggunakan dropdown menu untuk menampung semua link teman-teman anda. Dengan menggunakan dropdown menu ini ruang yang dihabiskan dalam blog anda akan sedikit. Perhatikan ilustrasi berikut:


Misalnya anda mempunyai 50 teman yang anda ajak untuk bertukar link, secara sederhana anda akan membuat deretan link seperti berikut ini


My Friends

Tentunya cara tersebut akan memakan banyak tempat. Jika Anda menggunakan dropdown menu, maka tampilannya akan menjadi seperti berikut ini:

My Friends


Untuk membuatnya login terlebih dahulu ke blog anda. Kemudian masuk ke bagian layout dan tambahkan elemen halaman dengan mengklik “Add Page Element” isikan title-nya sesuai dengan keinginan anda. Misalnya yang digunakan pada contoh ini adalah “My Friend”. Kemudian pada bagian bawahnya tambahkan kode html berikut ini:


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Judul_Menu</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
<option value="Links 3">Text 3</option>
</select>

Tentunya kode html di atas harus sedikit dimodifikasi. Yang perlu diganti adalah:


  • Link 1, Link 2, Link 3 diganti dengan alamat yang akan dituju

  • Text 1, Text 2, Text 3 diganti dengan text yang akan ditampilkan

Contohnya adalah seperti berikut ini (dengan menggunakan link-link yang terlah disebutkan diatas):


<center>My Friends<br/>
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Friend Link</option>
<option value="http://artikel32.blogspot.com">Artikel Komputer</option>
<option value="http://free-mp32.blogspot.com">Free MP3 Indonesia</option>
<option value="http://freemp32.blogspot.com">Free MP3 International</option>
<option value="http://program32.blogspot.com">Download Program</option>
<option value="http://seputar32.blogspot.com">Seputar Kita</option>
<option value="http://suta32.googlepages.com">suta32 Home</option>
</select></center>


Maka hasilnya adalah sebagai berikut:

My Friends


Tag <center> </center> digunakan untuk membuat dropdown menjadi rata tengah (center alignment). Untuk menambah link lagi tambahkan sebelum tag </select> dengan mengikuti format penulisan seperti contoh yang telah diberikan.


Dari hasil yang telah dicoba tadi, jika diperhatikan maka setiap mengklik link maka halaman kita sekarang akan digandi dengan halaman dari link yang kita klik. Untuk membuat agar link tersebut dibuka pada tab atau window baru maka ganti kode berikut:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">


Dengan kode berikut:


<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">


Selamat mencoba….

Kategori: ,