Cari Artikel Blog Ini

Total Tayangan Laman

MENGHEMAT HALAMAN 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 :
  1. Tulisan Link target 1 sampai 4 diganti dengan link yang akan dituju ketika pengunjung mengklik judul yang tampil.
  2. 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




Anda dapat menambahkan link target dan judul link target sesuai dengan jumlah yang ingin anda tampilkan dengan menambahkan kode seperti ini dibawah ini yang diletakan diatas kode :
</select>

<option value="Link target 5">Judul link target 5</option>

Tambahkan target="_blank" pada target link agar jika diklik aka muncul pada tab baru sehungga halaman utama anda tidak tertutup. Contoh cara meletakannya, lihat dibawah ini :

<option value="http://faisalardhy.blogspot.com/2008/05/naruto-chapter-383-epilog-selanjutnya.html"target="_blank">Chapter 382 : Epilog Selanjutnya</option>

Selain dapat digunakan dalam menghemat halaman postingan, dropdown menu juga dapat diletakan di sidebar yang dapat diisi dengan label blog, daftar isi blog, daftar link sahabat atau apa saja sesuai dengan kreasi anda.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
7 Comments

7 komentar :

KIT PES mengatakan...

boleh juga tipsnya

Blog GABUS mengatakan...

Berguna banget bagi saya...

Fauzan NR [ fhom.blogspot.com ]

mardi mengatakan...

makaci ya mas infonya.. jadi tambah ilmu nih..

fong'lee mengatakan...

nt ta coba yah....

http://chalaid.blogspot.com

caang mengatakan...

Saya sih sudah pasang dropdown menu (hasil utak-atik), dan baru tahu kalo rinciannya seperti itu (Ooo...) Sip lah

AcerNoval mengatakan...

bisa dijadiiin dropdown link sahabat ngga ?

DreamLight mengatakan...

Trims infonya gan. tlg dilihat diblog sy:

http://ldii-tebingtinggi.co.cc

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!