Cara Membuat Menu/Tombol DropDown di Blogger

Cara Membuat Menu/Tombol DropDown di Blogger – Menu dropdown (combo box) merupakan menu yang jika di-klik akan menampilkan submenu dari menu tersebut. Preview dari menu drop down dapat Anda lihat seperti gambar dibawah ini. Cobalah untuk memilih salah satu submenunya, maka Anda akan dibawa pergi ke url yang terdapat dalam submenu tersebut. Menu drop down ini dapat digunakan sebagai alternatif pengganti menu bar blog Anda, karena menu drop down ini kecil dan hanya sedikit memakan tempat.

Menu/tombol drop down ini dapat digunakan untuk navigasi dalam blog, seperti navigasi laman, daftar tags/label, tautan menuju situs favorit dan lain sebagainya. Untuk memasang menu drop down ini, perhatikan script menu drop down dibawah ini :

<select onchange='javascript:window.open(this.options[this.selectedIndex].value);'style="width: 100%";>
<option value="#" />--Judul Drop Down-- 
<option value="url1" /> title link 1
<option value="url2" /> title link 2
<option value="url3" /> title link 3
</select>

Jika script menu drop down tersebut dipasang di blogger (melalui Tambah Gadget -> HTML/Javascript), script tersebut akan terlihat seperti tombol menu drop down dibawah ini.

--Judul Drop Down-- title link 1 title link 2 title link 3

Nah, misalkan saya menginginkan title menu dropdown ini adalah Label Blog, kemudian title link 1 pada menu dropdown itu menjadi Tips Trik Blogging, dan jika di klik akan menuju ke url : http://xxpc123xx.blogspot.com/search/label/tips%20trik%20blogging, maka tinggal lakukan pengubahan pada --Judul DropDown-- , url1 dan title link 1. Selengkapnya, lihat beberapa pengubahan yang saya lakukan pada script menu drop down dibawah ini :

<select onchange='javascript:window.open(this.options[this.selectedIndex].value);'style="width: 100%";>
<option value="#" />Label Blog
<option value="http://xxpc123xx.blogspot.com/search/label/tips%20trik%20blogging" /> Tips + Trik Blogging
<option value="url2" /> title link 2
<option value="url3" /> title link 3
</select>

Sehingga previewnya akan seperti ini :

Label Blog Tips + Trik Blogging title link 2 title link 3

Untuk mengetes menu drop down ini, cobalah untuk mengklik salah satu menu diatas. Untuk Anda yang menginginkan menu dropdown ini memiliki submenu lebih dari 3, Anda dapat menambahkan <option value=’link tujuan’/> Judul Link, sebelum </select>

Cara Memasang Menu DropDown di Blogger :

1.     Buka blog Anda di blogger, lalu klik Tata Letak.

2.     Pada Tata Letak, pilih Tambahkan Gadget -> HTML/Javascript.

3.     Berikan judul pada kotak isian Judul, lalu pastekan kode HTML pada kotak dibawahnya.

4.     Klik Simpan untuk menyimpan menu dropdown.

5.     Buka blog Anda untuk melihat preview menu drop down di blog Anda

Sekarang, visitor blog Anda dapat menggunakan menu drop down tersebut sebagai alternatif navigasi di blog Anda. Selamat mencoba membuat menu drop down di blog!

Salam Blogger!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

Bagikan di FB Tweet ke Twitter! Bagikan di G+

Thanks for reading! Ingin menyebarluaskan artikel ini? Tolong sertakan juga link sumbernya (Cara Membuat Menu/Tombol DropDown di Blogger). Klik juga tombol Google +1 dibawah. Terima Kasih! Klik juga :

Anda sibuk? Tetap baca artikel terupdate dan terbaru dari Tips SEO + Blog – PC 123 melalui e-mail Anda. Caranya? Masukkan alamat e-mail Anda pada kotak berikut ini, dan klik Daftar, dan saya akan mengirimkan artikel terbaru ke e-mail Anda. Saya menjamin privasi Anda. Untuk info lebih jelas mengenai kotak ini, silahkan klik Disini.