Friday, May 17, 2013

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.

Cara Mudah Membuat / Memasang Menu Dropdown/Combo Box di Blogger/Blogspot - Preview menu drop down di Blogger
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 downtersebut dipasang di blogger (melalui Tambah Gadget -> HTML/Javascript), script tersebut akan terlihat seperti tombol menu drop down dibawah ini.



Nah, misalkan saya menginginkan title menu dropdownini adalah Label Blog, kemudian title link 1pada 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 :


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.

Cara Mudah Membuat / Memasang Menu Dropdown/Combo Box di Blogger/Blogspot - Buka blog Anda, lalu klik tombol Tata Letak yang terdapat pada pojok kiri bawah akun Blogger Anda
2.     Pada Tata Letak, pilih Tambahkan Gadget -> HTML/Javascript.

Cara Mudah Membuat / Memasang Menu Dropdown/Combo Box di Blogger/Blogspot - Pada window Tambahkan Gadget, klik HTML/Javascript, lalu lanjutkan ke step selanjutnya.
3.     Berikan judul pada kotak isian Judul, lalu pastekan kode HTML pada kotak dibawahnya.

Cara Mudah Membuat / Memasang Menu Dropdown/Combo Box di Blogger/Blogspot - Pastekan kode menu drop down diatas (yang telah Anda ubah sesuai dengan keperluan), lalu klik Simpan untuk menyimpannya
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!
Disqus Comments