Cara Mudah Membuat Menu Navigasi Dropdown pada Blog

Jadi buat kamu yang ingin punya menu navigasi dropdown, sekaranglah saatnya hahaa




Okelah, langsung saya beri tahu langkah-langkah untuk memasang menu navigasi dropdownya..

• Login ke Blogger >> klik Tata Letak >> Edit HTML. 
• Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap 
• Cari Code :
• ]]></b:skin> 

Copy paste code di bawah ini tepat di atasnya 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;
      } 

Selanjutnya cari kode </head>
copy kode dibawah ini tepat 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>

Cari kode yang mirip kode berikut.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
      </b:section>
      </div>

Dibawahnya, ketikkan 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.


Lalu klik >> Simpan Template (Di anjurkan untuk mempratinjau dulu sebelum menyimpan!)

Lihat Hasilnya.. Semoga Membantu..

NB: Apabila hasilnya tumpukan dengan menu navigasi bawaan template.. anda bisa menghapus menu navigasi bawaan template tsb..