DON'T LIKE ME

Postingan dengan DROPDOWN menu


 ----------------------------------------------------------------------------------

Waktu melihat komentar di buku tamu, ada sahabat yanng bertanya " Bagaimana cara membuat tempat membaca komik yang sangat simpel tinggal memilih langsung seperti di http://faisalardhy.blogspot.com"
Setelah melihat pada blog yang dijadikan contoh tadi, ternyata sahabat yang bertanya ingin membuat menu dropdown seperti contoh dibawah ini :




Cara membuatnya sangat simpel karena hanya memerlukan sedikit kode CSS, maka jadilah dropdown menu tersebut. Silahkan anda simak cara membuatnya.Yang anda perlukan untuk membuat dropdown menu adalah kode CSS seperti dibawah ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Link target 1">Judul link target 1</option>
<option value="Link target 2">Judul link target 2</option>
<option value="Link target 3">Judul link target 3</option>
<option value="Link target 4">Judul link target 4</option>
</select>


Gara mengedit kode diatas adalah sebagai berikut :
  • Tulisan Link target 1 sampai 4 diganti dengan link yang akan dituju ketika pengunjung mengklik judul yang tampil.
  • Tulisan Judul link target 1 sampai 4 diganti dengan judul dari link target atau judul yang ingin ditampilkan
Perhatikan contoh pengisian dropdown menu dibawah ini :


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://faisalardhy.blogspot.com/2008/05/naruto-chapter-380-wajah-itu.html">Chapter 380 : Wajah Itu</option>
<option value="http://faisalardhy.blogspot.com/2008/05/naruto-chapter-381-identitas-sebenarnya.html">Chapter 381 : Identitas Sebenarnya</option>
<option value="http://faisalardhy.blogspot.com/2008/05/naruto-chapter-382-keputusanku-yang.html">Chapter 382 : Keputusanku Yang Sebenarnya</option>
<option value="http://faisalardhy.blogspot.com/2008/05/naruto-chapter-383-epilog-selanjutnya.html">Chapter 382 : Epilog Selanjutnya</option>
</select>


Sumber Link : http://faisalardhy.blogspot.com

Contoh pengisian dropdown menu diatas akan kelihatan seperti ini





By : Bang Udin
----------------------------------------------------------------------------------
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :
TERIMAKASIH SUDAH BERKOMENTAR


Comments
2 Comments

2 komentar:

Moechtar mengatakan... Reply To This Comment

assalamu'alaikum bang,, ane mampir bang di blog panjenengan,, salam kenal ya, dari kami mochtar el~naoemi,,,, wassalam n trimaksih tutorial-tutorialnya,,, maklum masih kupeng(kurang pengalaman he,,he,,)

filemmove mengatakan... Reply To This Comment

Moechtar -- ( waalaikum salam sahabat , makasih ya sudah mampir di blog Bang Udin sama2 sahabat emoga tutorial dari bang udin memang bermanfaat bagi sahabat.

Posting Komentar