Tutorial Membuat Menu Dropdown Diblog - Kalian pasti taulah dropdown itu apa kalau gk tau ya sudah saya kasih tau. Dropdown Menu adalah menu yang jika kita mengarahkan kursor atau klik ke menu tersebut maka akan muncul menu lainya yang memanjang kebawah sesuai settingan yang dibuat author blog, Namun kali ini Menu Dropdown nya berbeda kenapa ?, karena pada postingan ini kita akan membuat menu dropdown dengan background image. jadi langsung saja hehehe
Buat kalian yang ingin mencoba silakan ikuti tutorial berikut :
1. Masuk ke dashboard kalian
2. Pilih menu Template → Edit HTML (Sebaiknya backup dulu template kalian)
3. Cari kode <b:skin><![CDATA[ , lalu letakkan kode berikut diatasnya.
1. Masuk ke dashboard kalian
2. Pilih menu Template → Edit HTML (Sebaiknya backup dulu template kalian)
3. Cari kode <b:skin><![CDATA[ , lalu letakkan kode berikut diatasnya.
<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>
.dropdown-b {
background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
margin-top: 4px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.dropdown-bg {
background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
text-align:center;
width:165px;
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: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}
6. Kemudian klik menu Tata Letak → Tambahkan Gadget → HTML/JavaScript lalu masukkan kode berikut ini :
<a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
<div id="dropdown-b-1" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
<a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
<div id="dropdown-b-2" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
<div id="dropdown-b-3" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
<div id="dropdown-b-4" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
weh ternyata gampang yah buat menu dropdown. ijin praktek gan
ReplyDeleteoh gitu caranya, trims
ReplyDeleteoker om info nyaa makasih
ReplyDeleteMantap.. ane praktekin berhasil gan... nice tips... btw blognya bagus gan
ReplyDeleteThanks gan tutornya sangat membantu
ReplyDeleteNice Info Gan Bermanfaat
ReplyDeleteGan, mau tanya ini menu dropdown nya sama seperti di blog ini apa ngk ya? mksd nya otomatis drop waktu di sentuh apa harus di klik dulu menu nya baru ngedrop ?
ReplyDeletebtw, mksh sebelum nya!
ini nih yg ane cari2 thanks min
ReplyDeletemanatp gan, ijin nyoba buat blog percobaan :D
ReplyDeleteijin copas coding nya gan buat diblog saya
ReplyDeleteWkahh.. Keren" thanks buat artikelnya minn
ReplyDeleteNice Post! Gan!
ReplyDeleteThanks!
Bagus juga menu dropdownnya mas. Saya suka desainnya juga Bagus.
ReplyDeleteSalam: www.anggialmedia.com
Thx Indo Nya Gan
ReplyDeletenais gan
ReplyDeleteAlhamdulillah di blog saya udah difungsikan memang sangat bermanfaat buat memudahkan pengunjung kita biar langsung menuju link yang dimaksud. Makasih tutorialnya mas.
ReplyDeleteudah di masokan juga ke saya. mkasih gan
ReplyDeletemakasih gan :D mantap nih :D ijin coba
ReplyDeletewah bisa bikin tampilanya ringan karena di dalam menu heheh...
ReplyDelete