cara mudah membuat menu drop down keren diblog

langsung saja bagaimana caranya
langsung saja yuk.........?

KODE CSS DAN CARA MENAMBAHKAN MENUNYA DI BLOG

• Silahkan anda lihat kode CSS  DISINI
• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Edit HTML
  
  
  
  • Cari tag/kode ]]></b:skin> tekan CTRL + F  untuk memudahkan pencarian
  • Berikutnya pastekan kode CSS tepat diatas tag  ]]></b:skin>  
  • Simpan template...
  • Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript  
  • Pastekan kode berikut di bawah ini didalamnya:  
  <div class="css3splitmenu">
  <a href="#">Blogging</a> <input type="checkbox" />
  
  <ul id="t">
  <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik blog</a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery java script</a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
  </ul>
  </div>
  
  <div class="css3splitmenu">
  <a href="#">Dunia spiritual</a> <input type="checkbox" />
  
  <ul>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual" >Wawasan spiritual</a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">Sejarah</a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
  </ul>
  </div>
  
  <div class="css3splitmenu nocss3splitmenu">
  <a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">Jejaring sosial</a>
  </div>
  
  
  <!-- Script below should follow all split menus -->
  
  <script type="text/javascript">
  
  ( function(){ // local scope
  
      if (!document.querySelectorAll || !document.addEventListener)
          return
      var uls = document.querySelectorAll('div.css3splitmenu > ul'),
              docbody = document.documentElement || document.body,
              checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
              zindexvalue = 100
  
      for (var i=0; i<uls.length; i++){
          ( function(x){ // closure to capture each i value
              checkboxes[i].addEventListener('click', function(e){
                  uls[x].style.zIndex = ++zindexvalue
                  for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
                      if (y != x)
                          checkboxes[y].checked = false
                  }
                  e.cancelBubble = true
              })
              checkboxes[i].addEventListener('blur', function(e){
                  setTimeout(function(){checkboxes[x].checked = false}, 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
                  e.cancelBubble = true
              })
          }) (i)
      }
  
      docbody.addEventListener('click', function(e){
          for (var i=0; i<uls.length; i++){
              checkboxes[i].checked = false
          }
      })
  
  })();

  
  </script>
  
  
  
  
• Silahkan Ganti link warna kuning dengan URL/Link anda
• Ganti judul Menu sesuai dengan yang anda inginkan
• Ganti judul Sub Menu sesuai Sub Menu yang di inginkan
• Simpan Gadget dan lihat hasilnya...
CATATAN: Untuk menambahkan tombol menu dan sub menu, tambahkan tagDIV dengan tag class="css3splitmenu dan menambahkan 3 element berikut:

<div class="css3splitmenu">
<a href="Link anda">Judul Menu</a> <input type="checkbox" />

<ul>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
</ul>
</div> 

sekiat dulu mohon maaf bila ada kekurangan 

mathur thank you