Bagaimana Cara Membuat Menu Drop Down?

Menu Drop Down diperlukan oleh sebuah blog untuk memberikan kesan rapi. Terkadang kita memiliki terlalu banyak konten, dan adanya Drop Down menu ini bisa sangat membantu. Kita tidak perlu dengan susah membuatnya menggunakan script jquery, karena da cara yang lebih mudah yatu menggunakan script CSS dan HTML. Berikut tutorial sederhana untuk membuat Drop Down menu pada Blogspot.


1. Pergi ke Blogger > Design > Page Elements
2. Pilih widget HTML/JavaScript dibawah header dan masukkan kode berikut dibawah ini.

<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
        p;  <a href='#'>About</a>
       </li>
        <li>
 +         <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>

            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>

      </ul>
    </div>

Gantikan tanda # dengan Page Links blog kita, sedangkan teks font tebal diganti dengan Page Names blog kita. Kode yang berwarna kuning adalah yang akan dibuat untuk menu DropDown. Kita dapat meng Copy dan Paste dibawah tab manapun sebelum kode </li>


Untuk menambahkan tab, letakkan kode berikut ini tepat diatas kode </ul>

<li>
          <a href='#'>Tab Name</a>
        </li>

3. Pergi ke Design > Edit HTML
4. Backup template kita, lalu cari kode

]]></b:skin>

5. Tepat diatas nya letakkan kode berikut ini

/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        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;
#333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    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: #BF0100;
    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: #BF0100;
    width: 120px;
    color: #FFF;
    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: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Lakukan perubahan berikut ini:

• Ganti #060505 untuk mengganti warna background pada menu utama
• Ganti the kode yang berwarna kuning untuk mengganti warna font, ukuran dan family
• Ganti #BF0100 untuk mengganti warna background tab saat kursor mendekat
• Ganti #BF0100 untuk mengganti warna background pada menu Drop Down
• Ganti #060505 untuk mengganti warna background menuDrop Down saat kursor mendekat
  

6. Simpan template.

Bagaimana Cara Membuat Menu Drop Down?olroom4