Cara Membuat Menu Drop Down

Untuk menghemat tempat pada halaman template terutama pada bagian sidebar, yang biasa digunakan untuk meletakkan berbagai link atau sejenisnya. Kadang kita perlu meringkas agar tidak memenuhi halaman pada sidebar.

Salah satu cara untuk meringkas tersebut kita bisa menggunakan sebuah menu,yang di sini kita bisa memanfaatkan menu Drop Down seperti di bawah ini:



Untuk membuat Menu Drop Down ini ada dua yakni untuk blogger dengan template klasik, dan template baru.

Untuk template klasik langkahnya yaitu :

1. Login ke blogger.com dg id Anda.


2. Klik Template.


3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

&<BloggerArchives>

<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>

</BloggerArchives>


4. Nah, ganti kode di atas dg kode html di bawah ini:

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

<option selected>- Archives -</option>

<BloggerArchives>

<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>

</BloggerArchives>

</select>


5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.


6. Selesai.

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :

1. login dulu, tentunya dengan id anda.


2. klik LAYOUT.


3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive.


4. Klik Edit pada kotak Blog Archive tadi.


5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek.


6. Klik Save Changes.


7. Selesai.

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, Untuk membuatnya silahkan anda copy kode HTML di bawah ini:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

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

<option>- Blog Tutorial -</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/panduan-membuat-blog-di-blogspot.html">Membuat Blog</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/cara-setting-blog-di-blogspot.html">setting Blog</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/cara-posting-artikel.html">Cara Posting Artikel</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/mengatur-huruf-warna.html">warna & hurup</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/menyisipkan-gambar-ke-dalam-posting.html">Menyisipkan Gambar</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/memperlebar-halaman-template.html">Memperlebar Halaman Template </option>

<option value="http://pribumiblogs.blogspot.com/2010/05/cara-membuat-text-area.html">Text area</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/upload-gambar-ke-photobucket.html">Upload Gambar</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/merubah-background-blog.html">Merubah Background</option>

<option value="http://pribumiblogs.blogspot.com/2010/02/memasang-buku-tamu.html">Pasang Buku Tamu</option>

</select></form>

Hasilnya akan seperti ini :

- Blog Tutorial -
Membuat Blog
setting Blog
Cara Posting Artikel
warna & hurup
Menyisipkan Gambar
Memperlebar Halaman Template
Text area
Upload Gambar
Merubah Background
Pasang Buku Tamu

Mudah bukan? Selamat mencoba !