Cara Membuat Drop Menu di Blogger

Kali ini saya ingin membagikan tips untuk anda, cara untuk membuat drop menu di Blogger. (supaya lebih keren, karena menu dalam blogger tidak ada variasi tambahan seperti menu yang sering kita temui di sebuah web) gambar diatas merupakan contoh drop menu yang saya gunakan di blogg ini. Saya dapatkan tips ini dari blogger,  langsung saja ke TKP. Berikut langkah2nya.


         1. Login di blogger anda
2. Masuk ke menu 'Tata Letak' dan 'tambah Gadget' pada posisi yang anda kehendaki
3. Pilih 'HTML /JavaScript dan masukan kode script berikut ini.

<style>
.clear{clear:both}
.navigasi{position:relative;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0}
.navigasi ul{margin:0;padding:0}
.navigasi ul li{float:left;list-style:none;position:relative}
.navigasi ul li a{display:block;color:#404040;text-decoration:none;padding:5px}
.navigasi ul li a:hover{background:#404040;color:#fefefe}
.navigasi ul li ul{position:absolute;display:none;width:150px;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0;margin:0 auto}
.navigasi ul ul ul{display:none;position:absolute;right:-150px;top:0}
.navigasi ul li:hover > ul,.navigasi ul ul li:hover > ul{display:block}
.navigasi ul li.clear,.navigasi ul ul li{float:none}
</style>
<nav class="navigasi">
 <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#">Kategori 1</a>
   <ul>
    <li><a href="#">Sub Menu 1.1</a></li>
    <li><a href="#">Sub Menu 1.2</a>
     <ul>
      <li><a href="#">Sub Menu 1.2.1</a></li>
      <li><a href="#">Sub Menu 1.2.2</a>
       <ul>
        <li><a href="#">Sub Menu 1.2.2.1</a></li>
        <li><a href="#">Sub Menu 1.2.2.2</a></li>
        <li><a href="#">Sub Menu 1.2.2.3</a></li>
        <li><a href="#">Sub Menu 1.2.2.4</a></li>
       </ul>
      </li>
      <li><a href="#">Sub Menu 1.2.3</a></li>
      <li><a href="#">Sub Menu 1.2.4</a></li>
     </ul>
    </li>
    <li><a href="#">Sub Menu 1.3</a></li>
    <li><a href="#">Sub Menu 1.4</a>
     <ul>
      <li><a href="#">Sub Menu 1.4.1</a></li>
      <li><a href="#">Sub Menu 1.4.2</a></li>
      <li><a href="#">Sub Menu 1.4.3</a></li>
      <li><a href="#">Sub Menu 1.4.4</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="#">Kategori 2</a>
   <ul>
    <li><a href="#">Sub Menu 2.1</a></li>
    <li><a href="#">Sub Menu 2.2</a></li>
    <li><a href="#">Sub Menu 2.3</a></li>
   </ul>
  </li>
  <li class="clear"></li>
 </ul>
</nav>

Sebelum Anda menyimpan gadget atau kode Drop Down Menu pada BloggerAnda, sesuaikan kode  diatas terlebih dahulu. Tanda Pagar silahkan ganti dengan link atau url. Sedangkan untuk kode yang dikurung dua tanda petik (Exp: Navigasi, Sub menu, dsb) dapat Anda ganti dengan judul laman, judul url ataupun keterangan lainnya. Selanjutnya silahkan modifikasi sesuka hati anda.