Pages

Lokasi: Home » » Membuat Menu Dropdown Dengan JavaScript

Membuat Menu Dropdown Dengan JavaScript

Bagi yang sedang melengkapi pernak pernik di blognya, kali ini saya coba share bagaimana membuat Menu Dropdown dengan JavaScript. Selain untuk menghiasi blog yang kita miliki, menu ini juga dapat menghemat tempat. Jika ingin melihat demonya, sobat bisa perhatikan tombol "MENU" di sidebar pada blog ini.

Kode-kode yang akan kita gunakan ini dibuat oleh Kang Rohman, udah pada kenal kan? Silahkan klik disini kalau mau kenalan.

Sekarang kita mulai pembahasannya... 

Langkah pertama yang harus dilakukan adalah membuat tiga banner untuk background tulisan. Banner ini bisa dibuat dengan program design & grafik semisal Adobe Photoshop atau Corel Draw ataupun program-program lainya yang sejenis.

Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com atau mau disimpan di file online sendiri juga boleh.

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 Template
3. Klik menu Edit HTML
4. Klik tombol Download Template lengkap untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template
5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></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> 


6. Masukan kode berikut diatas kode ]]></b:skin>
  
.raden{
background-image: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBXtUl0e_PCgiLcgTuPU_oEGVrF5ZZT1DrIgyr2cvIDXIW75t9oUOCuCF-S1x6A5-oAiWtCSfns-T5MTCOjBlGnjGbbXMimKgSpkFKgmKCzI2Ht4h3gm3Vs2a3oDZzrUpzJ4oaPhaCxQ/s1600/untuk+menu3.jpg');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #F6E151;
}

.ogah{
background-image:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFAVfvDFVW9VPZftGAAMRijzpO0LY7iJdr8pfktHhO610P_hDniglSiKhYUNTlwCALhAmRY8tufJP81SA5byDs39cavIPbffhN8-_w12BnzDD06pIuJNZTbUx-9JS2AubW4L8h_7VAxLw/s1600/untuk+menu.jpg');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: ##FAF705;
height: 18px;
}

.ogahniye{
background-image: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKEZ64-m6v0T8ktkinNGAUWZEHOtZtdSMqEszHxYKGKgzW0dhViOqCipPj3yGiXNURcebcjind7pX5yJ9eYfzqbIVYU1y3GpZbdSXNui-4vhC0s0Y2OAPezIm8yAHonV-sKOVHIU7vq5A/s1600/untuk+menu2.jpg');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #0572FA;
height: 18px;
}

.hide{
display: none;
}

.show{
display: block;
}


a{cursor: hand}

7. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :

<a class="raden"><font size="5"><b>MENU</b></font></a>

<a class="ogah" onclick="showHide('ogahku1')">My Pages</a>

<div id="ogahku1" class="hide">

<a href=" http://skocikita.blogspot.com/p/webcam-software.html " class="ogahniye">Webcam Software</a>

<a href="http://skocikita.blogspot.com/p/watch-tv.html" class="ogahniye">Watch TV</a>

<a href="http://skocikita.blogspot.com/p/global-promote.html" class="ogahniye">Global Promote</a>


<a href="http://skocikita.blogspot.com/p/ineedsellcom.html" class="ogahniye">iNeedsell.com</a>


<a href="http://skocikita.blogspot.com/p/mobigarda-software.html" class="ogahniye">Mobigarda Software</a>

<a href=" http://skocikita.blogspot.com/p/turn-your-traffic-into-cash.html " class="ogahniye">turn-your-traffic-into-cash</a>

<a href="http://skocikita.blogspot.com/p/newweblab.html" class="ogahniye"> NewWebLab </a>

</div>

<a class="ogah" onclick="showHide('ogahku2')">Link Sahabat</a>

<div id="ogahku2" class="hide">
<a href="http://kolom-tutorial.blogspot.com/" target="_blank">Blog Kang Rohman</a>

<a href="http://www.kucoba.com/" target="_blank">Kucoba.com</a>

<a href="http://jayaputrasbloq.blogspot.com/" target="_blank">Panduan sukses blogger</a>

<a href="http://alawik.blogspot.com/" target="_blank">Alawik.Blogspot.Com</a>

<a href="http://herba-max-forum.1053936.n5.nabble.com/" target="_blank">HerbaMax Forum</a>

<a href="http://www.quackit.com/">Free Webmaster Tutorials - Quackit.com</a> from Quackit.com

<a href="http://www.socialmarker.com/" target="_blank">Social Marker</a>

<a href="http://dokternasir.web.id/" target="_blank" title="Konsultasi Online dengan dr. Nasir"><img src="http://img20.imageshack.us/img20/4598/mybannery.png" alt="dokternasir.web.id" /></a>

<a href="http://pknkita.blogspot.com/" target="_blank" title="Pendidikan Kewarganegaraan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtNhwPUp2cuVvZ2B1W6Y4tqhE1WexcwfOZCPTSgCWBRQ2hs7F6Wg3a9CVD-K5DjeTgnQRvGp-X-LuuvO3aGK5424bAr66exLTR4YH6_oO1DZhw5vdkP3p3hI55ucHw_q5VTX2X6KBFxt0/s1600/pkn+onlen.jpg" alt="pknkita.blogspot.com" /></a>

</div>

8. Lihat hasilnya
9. Selesai.

Keterangan kode-kode diatas:

Kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :

<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> 


Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :

.raden
 --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBXtUl0e_PCgiLcgTuPU_oEGVrF5ZZT1DrIgyr2cvIDXIW75t9oUOCuCF-S1x6A5-oAiWtCSfns-T5MTCOjBlGnjGbbXMimKgSpkFKgmKCzI2Ht4h3gm3Vs2a3oDZzrUpzJ4oaPhaCxQ/s1600/untuk+menu3.jpg');
 --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah Tombol.

text-align:center;
 --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

width:90%;
 --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

font-family: georgia, Helvetica, sans-serif;
 --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

padding-left:5px;
 --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-right:5px;
 --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-top:5px;
 --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-bottom: 5px;
 --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

display:block;
 --> block berarti ditampilkan,jadi jangan dirubah.

text-decoration: none;
 --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

color: #F6E151;
 --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.

.ogah
 --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.

.ogahniye
 --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.

.hide
display: none;
 --> Pendifinisian untuk .hide disembunyikan (tidak tampil).

.show
display: block;
 --> Pendifinisian untuk show ditampilkan.

a{cursor: hand}
Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.

 
Kode-kode di atas masih memuat link yang saya miliki, jadi link tersebut silahkan sobat ubah sesuai dengan link yang dimiliki.
Untuk berlangganan artikel, masukan email anda disini:



1 Comment :

Daronime mengatakan...

Dicoba Dulu Gan ...

29 Oktober 2018 pukul 16.43

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

Langganan: Posting Komentar ( Atom )
 

Info Olahraga

Info Komputer

Info Blackberry