Kamis, 16 Mei 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 down tersebut 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 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 :


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!

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

11 komentar:

  1. wah ini dia yang saya cari
    makasi infonya

    BalasHapus
    Balasan
    1. @Info Blog dan SEO : Sama - sama... Trims atas komentar dan kunjungannya... :)

      Hapus
  2. blogwalking :)
    .
    comment balik ya ..

    BalasHapus
    Balasan
    1. @Lensa Globe : Oke. Trims komentar dan kunjungannya... :)

      Hapus
  3. akhirnya ketemu juga....

    Mantaaaap.. Terima kasih kakak :)

    BalasHapus
    Balasan
    1. @Slamet Hermanto : Sama - sama. Trims ya, udah mau comment sama visit blog kakak... :)

      Hapus
  4. wah thank's banget kaka info nya bermanfaat banget nih.
    kunjungi balik blog aku ya kaka http://studycrotbrutz.blogspot.com/ Terimakasih :)

    BalasHapus
    Balasan
    1. @Muhammad Fariz : Oke dik. Trims atas kunjungan dan komentarnya... :)

      Hapus
  5. Balasan
    1. @Boxcone : Nggih. Trims atas kunjungan dan komentarnya... :)

      Hapus
  6. Wah rapi nie jadi ingat waktu sekolah dulu...

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!