Menciptakan Menu DropDown

Menciptakan Menu DropDown pada Blogspot

     Bloger kebanyakan menggunakan menu ini untuk membuat tampilan WebBlog menjadi lebih elegan, dan langkahnya adalah sebagai berikut:

1. Masuk pada Dasboard -  Template
2. Edit HTML - Expand Template Widget.
3. CopyPaste-kan Code berikut:

/*----- MBT Drop Down Menu ----*/
    #mbtnavbar {
        background: #;
        width: 880px;
        color: #FFF;
            margin: 0px;
            padding: 0;
            position: relative;
            border-top:0px solid #000000;
            height:35px;
    }
    #mbtnav {
        margin: 0;
        padding: 0;
    }
    #mbtnav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #mbtnav li {
        list-style: none;
        margin: 0;
        padding: 0;
            border-left:1px solid #DDD;
            border-right:1px solid #DDD;
            height:35px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
        color: #000;
        display: block;
       font:normal 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
      

    }
    #mbtnav li a:hover, #mbtnav li a:active {
        background: #809FFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 10px 12px;
    }
    #mbtnav li {
        float: left;
        padding: 0;
    }
    #mbtnav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;
    }
    #mbtnav li ul a {
        width: 140px;
    }
    #mbtnav li ul ul {
        margin: -25px 0 0 161px;
    }
    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
        left: -999em;
    }
    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
        left: auto;
    }
    #mbtnav li:hover, #mbtnav li.sfhover {
        position: static;
    }
    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
        background: #809FFE;
        width: 120px;
        color: #000;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
   }
    #mbtnav li li a:hover, #mbtnavli li a:active {
        background: #2646A6;
        color: #FFF;
        display: block;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    }
4. Selesai dan Simpan.
5. Kembali lagi dan pilih Tata Letak - Tambah Gadget
6. CopyPaste-kan pada Konten Script berikut:
<div id='mbtnavbar'>
          <ul id='mbtnav'>
            <li>
              <a href='#'>Beranda</a>
            </li>
            <li>
              <a   href='http://www.blogger.com/profile/14794274043219710907'>Tentang saya</a>
           </li>
            <li>
              <a href='#'>Produk</a>
            </li>
      <li>
               <a href='#'>Kontak</a>

                <ul>
                    <li><a href='#'>Facebook</a></li>
                    <li><a href='#'>Twitter</a></li>
                    <li><a href='#'>Yahoo</a></li>
                  </ul>
            </li>

          </ul>
        </div>
7. Simpan, OK semua dah Klar
8. Silahkan Dipraktekkan.