Cara Membuat Menu Dropdown

Advertise Here

Salam sejahtera kami ucapkan, dan terimakasih atas kunjungannya. baik kali ini saya akan mencoba menjelaskan bagaimana membuat menu dropdown dengan background.

bagi yang ingin mencoba ikuti langkah-langkah berikut ini:

1. Buka akun blogger anda, kemudian pilih menu Design > edit HTML dan jangan lupa download lengkap Tempalate Blog anda, untuk jaga-jaga kalau eror.
2. Centang menu  expand widget templates
3. Cari kode <b:skin><![CDATA[ kemudian masukan kode dibawah ini tepat 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 di atasnya:

.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
     6.  Kemudian klik menu Design > Page Element > Add a Gadget

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

     8.  Langkah terakhir klik Save

Nah itu bagaimana cara membuat men dropdown. selamat mencoba semoga bermanfaat.