Ars_Sahabat Peterpan: Cara Mudah Membuat Menu Navigator

Cara Mudah Membuat Menu Navigator

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

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

/* 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;
      }
Cari kode berikut

</head>
Ketikkan code berikut diatasnya

<script>
      var auahgelap = '';
      function petakumpet(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan == 'ngumpet') {
      if (auahgelap != '') {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = 'ngumpet';
      }
      menu.className = 'muncul';
      auahgelap = id;
      } else {
      menu.className = 'ngumpet';
      }
      }
      function umpetpetak(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan != 'ngumpet') {
      if (auahgelap == '') {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = 'muncul';
      }
      menu.className = 'ngumpet';
      auahgelap = id;
      } else {
      menu.className = 'muncul';
      }
      }
      </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("submenu1")' onmouseover='umpetpetak("submenu1")'><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("submenu2")' onmouseover='umpetpetak("submenu2")'><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("submenu3")' onmouseover='umpetpetak("submenu3")'><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("submenu4")' onmouseover='umpetpetak("submenu4")'><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..