Cara membuat Dropdown Menu Pada Blog

Dropdown menu adalah menu menu pada blog yang biasanya digunakan untuk menuju ke link-link tertentu pada blog atau yang lainnya, selain menu-menu  juga terdapat sub menu yang apabila kursor ditujukan pada menu, akan memunculkan submenu-submenu yang lain, karena sub menu yang ditarik kebawahlah submenu ini disebut dengan drop down menu.

Berikut saya ingin berbagi pengetahuan cara membuat dropdown menu pada blog:

1. pertama login dulu ke blog agan.

2. buka menu template kemudian edit HTML.

3. kemudian cari kode berikut  ]]></b:skin> (gunakan ctrl+F untuk menemukan kodenya)

4.setelah ketemu copy pastekan kode berikut tepat di bawah kode  ]]></b:skin> 

#DropdownMenu {
    background:#ff6803;
border-radius:6px;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#FFFFFF;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;


} 
#Dropdownbox {
    width: 875px;
border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#strike { 
border-radius:6px;
    margin: 0;
    padding: 0;
}
#strike ul {
border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li {
border-radius:6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
    color:#FFFFFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
    background:#FFFFFF;
    color:#ff6803;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
      background:#ff6803;
    width: 150px;
    color:#FFFFFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
     background:#FFFFFF;
    color:#ff6803;
    padding: 7px 10px;
}
#strike li {
border-radius:6px;
    float: left;
    padding: 0;
}
#strike li ul {
border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#strike li ul a {
border-radius:6px;
    width: 140px;
}
#strike li ul ul {
border-radius:6px;
    margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
    left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
    left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
    position: static;
}

5. kode yang berwarna kuning merupakan kode warna, agan bisa mengubah kode backgroung tersebut sesuai keinginan agan sendiri.

6. Bila sudah selesai mengedit, kemudian simpan template.

7. setelah itu menuju ke TATA LETAK--> tambahkan gadget

8. pilih javascript kemudian copy pastekan kode dibawah ini pada javascript tersebut

 

<div id="DropdownMenu">
       <div id="Dropdownbox">
      <ul id="strike">
        <li><a href="#">Menu1</a></li>
        <li>
          <a href="#">Menu2</a>
          <ul>
            <li>
              <a href="#">Sub Menu 2</a>
              <ul>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
            <li><a href="#">Sub Menu 5</a></li>
            <li><a href="#">Sub Menu 6</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
      </ul>
    </div>
  </div>

7. pada tanda warna merah ganti dengan link tujuan yang diinginkan, dan menu atau submenu bisa diganti dengan 

kata kata sendiri