Membuat Drop-Down Menu pada Blogger

Bagi Anda para pengguna blogger tentunya sudah tidak asing lagi dengan apa yang dimaksud dengan Drop-Down Menu pada Blogger bukan? Atau mungkin Anda sudah sering kali menjumpainya dibeberapa website ternama lainnya. Drop-Down Menu sering kali digunakan untuk menempatkan link atau url pada laman blog maupun website. Selain memperindah desain sebuah blog, Drop-Down Menu juga dapat membantu para visitor blog dalam mengakses beberapa konten blog kita yang sengaja dibuat menggunakan url atau link khusus. Untuk style atau gaya, Drop-Down Menu cukuplah bervariasi dari yang sederhana hingga yang rumit. Bahkan ada juga yang menggunakan kombinasi antara kode css, kode html dan javascript, sehingga tentunya cukuplah menarik bukan?

Untuk itu dalam kesempatan kali ini IdBlogDesign ingin berbagi dengan Anda tentang cara membuat Drop-Down Menu pada Blogger dan tentunya sangat disayangkan jika Anda lewatkan. Namun sebelumnya, perlu Anda ketahui bahwa untuk Drop-Down Menu versi IdBlogDesign kali ini tidaklah menggunakan javascript melainkan hanya menggunakan kode css3 dan kode html saja. Untuk penggunaanyapun dirasa cukup mudah, tentunya jika Anda mau mencoba dan berusaha.



Demo:

http://demodropdownmenu-idblogdesign.blogspot.com/

Ok langsung saja berikut untuk langkah-langkahnya:

1. Masuk ke akun blogger Anda.
2. Masuk ke menu Tata Letak dan Tambah gadget pada posisi yang Anda kehendaki (ex:main wrapper, crosscol-wrapper, atau yang lainnya.)
3. Pilih HTML/JavaScript dan masukkan kode script berikut didalamnya:
   

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

Selamat mencoba...