Cara Membuat Menu dan Sub Menu Dropdown di Blog

Flamboyan68 - Menu dropdown pada umumnya berisikan link untuk bisa akses ke suatu halaman tertentu. Menu dropdown memiliki sub menu yang tampilannya  memanjang ke bawah makanya menu ini di sebut  menu dropdown. 

Fitur menu dropdown ini menggunakan sedikit tambahan pada bagian style CSS, menggunakan efek melengkung pada sisi kiri kanan ujungnya  dan tidak membentuk siku.  Cara pemasangannya mudah  dan sobat bisa mengikuti cara dan langkah di bawah ini.

• Login ke akun blogger sobat
• Lalu klik template > edit html
• Kemudian sobat cari kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian
• Setelah ketemu copy kode dibawah ini dan paste tepat di atas 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;
}

• Kode warna merah #ff6803 dan putih itu adalah kode warna background silahkan ganti sesuai keinginan sobat. Kode #FFFFFF  adalah kode untuk warna tulisan di menu. Silahkan anda ganti bila memang diperlukan. Untuk menentukan kode warna silahkan sobat cari disini Kode Warna/Hex Code. 
• Simpan template

Langkah selanjutnya yaitu ;

• Selanjutnya sobat menuju ke menu blogger klik Tata Letak
• Klik Tambah Gadget > Pilih Html/Javascript
• Copy kode script di bawah ini dan paste di kolom html/javascript

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

• Silahkan sobat ganti tulisan Menu1, Menu 2 dan seterusnya dengan nama menu yang sobat inginkan dan tanda pagar "#" ini adalah alamat link dari menu yang sobat buat. 
• Langkah terakhir simpan.

Selamat mencoba dan semoga bermanfaat.
source