Cara Mudah Membuat Menu Navigasi Dropdown pada Blog

Saya sempat bingung dan putus asa ketika mencari Cara Mudah Membuat Menu Navigasi Dropdown pada Blog. Dan berkali-kali saya mengalami kegagalan ketika mencoba mengedit blog saya. Tetapi dengan usaha dan niat yang cukup tinggi saya tidak akan menyerah dan selain itu dengan kegagalan itulah saya menemukan langkah mudah dan memahami juga Cara Mudah Membuat Menu Navigasi Dropdown pada Blog. Tujuan memberi navigasi tersebut pastilah sangat berguna untuk mempercantik blog dan agar mudah pula mencari suatu hal yang dicari.

Ini contoh hasil Menu Navigasi Dropdown Buatan Saya :

Silahkan klik disini 

Langsung Saja kita Cara Mudah Membuat Menu Navigasi Dropdown pada Blog  :

1. Login blog anda
2. Kemudian pilih Template

3. Back up dulu template blog anda (Sangat dianjurkan! Karena jika terjadi kesalahan bisa kita kembalikan lagi)
4. Terus Edit Html

5. Centang "Expand Widget Template"

6. Setelah itu cari kode ]]></b:skin> (Tekan ctrl+F , agar mudah mencarinya)
7. Kemudian copy paste kode berikut ini tepat diatas kode ]]></b:skin> :


/* Navigasi Dropdown Menu */
      #navdropdownmenu{
      background:black; /*Warna Latar Belakang */
      width:100%;
      height:auto;
      margin:0;
      padding:0;
      }
      #navdropdownmenu ul{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
      }
      #navdropdownmenu li{
      list-style:none;
      float:left;
      }
      #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
      color:yellow; /* Warna Teks */
      display:block;
      padding:9px 10px 9px 10px;
      font-size: 12px; /* Ukuran Teks */
      font-family: verdana; /* Jenis font */
      text-decoration:none;
      }
      #navdropdownmenu li a:hover{
      background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
      color:black; /* Warna teks saat kursor mouse berada di atasnya */
      padding:9px 10px 9px 10px;
      }
      #navdropdownmenu li ul{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
      float:none;
      background:black; /* Warna latar belakang submenu */
      width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
      border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a:hover{
      background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
      color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
      }
      #navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      left:auto;
      }
      .ngumpet{
      display:none;
      }
      .muncul{
      display:block;
      }

8. Kemudian cari lagi kode </head>
9. Copy paste kan kode berikut ini diatas kode </head>

<script>
      var auahgelap = &#39;&#39;;
      function petakumpet(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan == &#39;ngumpet&#39;) {
      if (auahgelap != &#39;&#39;) {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = &#39;ngumpet&#39;;
      }
      menu.className = &#39;muncul&#39;;
      auahgelap = id;
      } else {
      menu.className = &#39;ngumpet&#39;;
      }
      }
      function umpetpetak(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan != &#39;ngumpet&#39;) {
      if (auahgelap == &#39;&#39;) {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = &#39;muncul&#39;;
      }
      menu.className = &#39;ngumpet&#39;;
      auahgelap = id;
      } else {
      menu.className = &#39;muncul&#39;;
      }
      }
      </script>

10. Lalu Simpan Template (dianjurkan pratinjau dulu ya)

11. Kemudian sekarang pilih Tata Letak

12. Dan klik Tambah Gadget
13. Lalu pilih HTML/ Java Script
14. Masukkan kode berikut:

<div id='navdropdownmenu'>
      <ul id='navdropdownmenu'>
      <li><a href='#'>Home</a></li>
      <li onmouseout='petakumpet(&quot;submenu1&quot;)' onmouseover='umpetpetak(&quot;submenu1&quot;)'><a href='#'>Software PC</a>
      <div class='ngumpet' id='submenu1'>
      <ul>
      <li><a href='#'>Application</a></li>
      <li><a href='#'>Anti Virus</a></li>
      <li><a href='#'>Internet Browser</a></li>
      <li><a href='#'>Utility</a></li>
      <li><a href='#'>Themes</a></li>
      <li><a href='#'>Desktop</a></li>
      <li><a href='#'>Games</a></li>
      <li><a href='#'>Hack Tools</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet(&quot;submenu2&quot;)' onmouseover='umpetpetak(&quot;submenu2&quot;)'><a href='#'>Mobile Software</a>
      <div class='ngumpet' id='submenu2'>
      <ul>
      <li><a href='#'>Application</a></li>
      <li><a href='#'>Games</a></li>
      <li><a href='#'>Themes</a></li>
      <li><a href='#'>Anti Virus</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet(&quot;submenu3&quot;)' onmouseover='umpetpetak(&quot;submenu3&quot;)'><a href='#'>Tips And Tricks</a>
      <div class='ngumpet' id='submenu3'>
      <ul>
      <li><a href='#'>Blogger</a></li>
      <li><a href='#'>Tutorials</a></li>
      <li><a href='#'>Computers</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet(&quot;submenu4&quot;)' onmouseover='umpetpetak(&quot;submenu4&quot;)'><a href='#'>Music</a>
      <div class='ngumpet' id='submenu4'>
      <ul>
      <li><a href='#'>Indo Hits</a></li>
      <li><a href='#'>Rock</a></li>
      </ul>
      </div>
      </li>
      <li><a href='#'>News Update</a></li>
      </ul>
      </div>


Keterangan:
      * Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
      * Anda bisa menambah atau mengurangi menu diatas.


Semoga bermanfaat. Selamat mencoba. Good Luck ! :)
Jangan pernah takut gagal. ;)