Tutorial Membuat Dropdown Menu Diblog

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.

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

4. Kemudian cari kode ]]></b:skin> , letakkan kode berikut ini diatasnya.

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

5. Lalu klik Save Template.
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>

7. Lalu Save Selesai 

Mungkin itu saja untuk Tutorial  Membuat Dropdown Menu Diblog. Jika ada yang kurang jelas silahkan tanyakan melalui komentar. Semoga bermanfaat dan terima kasih.