Membuat Drop Down Menu pada Blogger

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

Sebelum Anda menyimpan gadget atau kode Drop Down Menu pada Blogger Anda, sesuaikan kode berwarna merah dan hijau diatas terlebih dahulu. Warna merah silahkan ganti dengan link atau url. Sedangkan untuk kode yang berwarna hijau dapat Anda ganti dengan judul laman, judul url ataupun keterangan lainnya.

Kode css dan html ataupun jumlah Drop Down url diatas dapat Anda modifikasi sesuai dengan kreasi Anda masing-masing dan perlu diingat bahwa hasil penggunaan kode diatas tersebut mungkin akan berbeda pada setiap template blog yang telah Anda gunakan. Selamat mencoba...

sumber :  http://www.idblogdesign.com/2012/09/membuat-drop-down-menu-pada-blogger.html