Membuat Menu Dropdown dengan JavaScript

Bagi sobat yang suga mendesain menu dengan gaya tersendiri salah satunya yaitu dengan erdit javascrip, di sini saya uraikan gimana cara membuat menu dropdown dengan javascrip, gini sob Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba : langsung aza sob, untuk membuat tampilan menu yang keren sesuai selera kita , kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya. sebagai contoh lihat gambar tombol di bawah ini :

Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com. Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca – baca lagi silahkan klik di sini. Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

1. Sign in di blogger.com dengan id sobat
2. Klik menu LayOut
3. Klik menu Edit HTML
4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
6. Tunggu beberapa saat sampai proses selesai
7. Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>

<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}

</script>

8. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.hide{
display: none;
}

.show{
display: block;
}

a{cursor: hand}


9. Klik tombol SAVE TEMPLATE

Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; –> angka “90″ artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi “80″ atau berapa saja.

10. Klik menu Page Elements
11. Klik tulisan Add a Page Element
12. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript
13. Masukan kode berikut :

<a onclick="showHide('ogahku1')">Menu utama 1</a>
<div id="ogahku1">
<a href="#">Link 1 di sini</a>>
<a href="#">Link 2 di sini</a>
<a href="#">Link 3 di sini</a>
<a href="#">Link 4 di sini</a>
</div>
<a onclick="showHide('ogahku2')">Menu utama 2 </a>
<div id="ogahku2">
<a href="#">Link 1 di sini</a>
<a href="#">Link 2 di sini</a>
<a href="#">Link 3 di sini</a>
<a href="#">Link 4 di sini</a>
</div>
<a onclick="showHide('ogahku3')">Menu utama 3 </a>
<div id="ogahku3">
<a href="#">Link 1 di sini</a>
<a href="#">Link 2 di sini</a>
<a href="#">Link 3 di sini</a>
<a href="#">Link 4 di sini</a>
</div>
<a onclick="showHide('ogahku4')">Menu utama 4 </a>
<div id="ogahku4">
<a href="#">Link 1 di sini</a>
<a href="#">Link 2 di sini</a>
<a href="#">Link 3 di sini</a>
<a href="#">Link 4 di sini</a>
</div>


14. Klik tombol SAVE CHANGES
15. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )
16. Klik tombol SAVE
17. Selesai

Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.

Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.

selamat mencoba sob, n moga bermanfaat

Pencarian halaman ini:

bikin menu bergambar java (2), kode JavaScript untuk membuat tampilan menu (2), conto keren menu format html (2), coding menu dropdown kemudian ke kanan dengan javascript (2), menambah menu klik link javascript (2), membuat tombol menu dengan javascript (1), javascript untuk membuat menu tombol (1), template menu dropdown show hide (1), membuat html show hide text (1), membuat menu bar drop down pada template klasik blog (1), membuat menu drop down keren dengan javascript dan css (1), Membuat menu dropDown kode html (1), membuat tampilan kecil dengan java script (1), tampilan keren menu dropdown (1), membuat tampilanmenu di program java (1), mengedit blogger dengan javascript (1), javascript menu drop down keren (1), dropdown pada javascript (1), buat menu di blog dengan javascript (1), cara buat tampilan menu bar keren dengan html (1), cara drop down javascript (1), cara membuat menu kesamping dengan javascript (1), coding membuat list menu ke samping dengan javascript (1), codingan java untuk mengembalikan ke menu awal (1), contoh coding java untuk membuat menu (1), contoh coding javascript (1), contoh coding script tampilan menu bar (1), contoh codingan java script (1), contoh template javascript (1), download templete dengan javascript (1), drop down menu bar ke samping (1), template website html dengan menu samping dropdown (1)

Artikel Terkait :

• Pasang Feed di Blog
• Cara membuat Label, kategori
• Pasang Recent Comments
• Membuat Menu Dropdown dengan JavaScript (2)
• Random Banner Header
• Text Berjalan di Bar menu
• Cara Membuat Favicon di Blog
• Template baru VS Template Klasik blogspot
• Daftar Mybloglog di blogspot
• Cara pasang gambar di blogger

---

---

Mari Kita Saling Menghargai Sesama Blogger

Apabila anda merasa artikel ini bermanfaat, silahkan share dimana saja.

Dan jika berkenan mohon mencantumkan link sumbernya. Terima Kasih.

www.erifargaz.com

---

Perhatian: Jika Sobat Download Mengarah ke "adf.ly" Tunggu aza 5 Detik dan Cari Tombol "SKIP AD" yang ada di Sebelah Kanan Atas Monitor Sobat, Klik Aza Sob. dan jangan lupa tinggalkan komentar

---