Cara Membuat DropDown Menu di Blog

Halo sobat Legend Of Blog kali ini saya akan membahas tentang Cara Membuat DropDown Menu di Blog apasih kegunaan nya sampai begitu pentingnya di post ? Ini kegunaan nya selain menghemat tempat di blog anda juga dapat menggunakan nya untuk berbagai keperluar seperti kita meletakan Chatbox di Laman Kosong kan biar gak berat.Terus gimana dong yang mau area Chatting ? Biasanya kan ada Buku Tamu tetapi niat kita tidak meleletkan Blog.Jadi kita dimana dong untuk meletakan Link Menuju ChatBox nya pakai saja Menu atau yang telah dibahas sekarang yaitu Cara Membuat DropDown Menu di Blog.
Okay kita kepermasalahan Intinya.Sobat ingin demo ? Klik disini untuk >>>Demo
1.Sobat harus mempunyai Blog terus login ke Blogger sobat.
2.Buka bagian Template Blog sobat lalu klik Edit HTML.
3.Carilah kode ]]><b:skin> [Bila kalian ingin cepat mencari gunakanlah CTRL+F]
4.Setelah ketemu kode  ]]><b:skin> ini sobat diharuskan copy dan paste kode dibawah ini tepat diatas kode ]]><b:skin>
Script:
_____________________________________________________________________________________

#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;
}

____________________________________________________________________________________ 
Note: 
Gantilah kode berwarna dengan warna yang sobat inginkan karena itu adalah kode warna.
6.Sudah ? Simpan Template sobat.
7.Klik bagian Tata Letak  tambah gadget HTML/Java Script di Blog sobat.
8.Letakan script html di bawah ini di kolom yang disediakan. (Judul gadget tidak perlu diisi atau meskipun diisi tak apa lah) 
Script:
____________________________________________________________________________________

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

____________________________________________________________________________________  10.Sobat bisa mengganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.
perlu di ingat bila sobat ingin menuju ke sebuah link gunakanlah http:// contoh:http://legend-web.blogspot.com
11. Bila sudah klik SIMPAN, dan lihat perubahannya pada blog anda.