Menu Cantik Drop Down

Lihat Gambarnya dulu,,,,,,,,,

Kurang lebih seperti itu tergantung masing2 template,,,,jika tertarik,,,,,,follow this tutorial,,,,,

seperti biasa masuk design trus edit html,,,,

• cari kode ]]></b:skin>
• masukkan kode dibawah ini sebelum kode ]]></b:skin>

• #jsddm {
  margin: 0;
  padding: 15px;
  z-index:1000000000;
  position:relative;
  }
  
  #jsddm li {
  float: left;
  list-style: none;
  font: 12px Tahoma, Arial;
  }
  
  #jsddm li a {
  display: block;
  white-space: nowrap;
  margin:1px 3px;
  border: 1px solid #AAAAAA;
  background: #cccccc;
  background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
  background: -moz-linear-gradient(top, #ebebeb, #cccccc);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: #ffffff 0 1px 0;
  color: #363636;
  font-size: 15px;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
  }
  
  #jsddm li a:hover {
  background: #C8C8C8;
  }
  
  #jsddm li ul {
  margin: 0;
  padding: 0;
  position: absolute;
  visibility: hidden;
  border-top: 1px solid white;
  }
  
  #jsddm li ul li {
  float: none;
  display: inline;
  }
  
  #jsddm li ul li a {
  width: auto;
  background: #CAE8FA;
  }
  
  #jsddm li ul li a:hover {
  background: #A3CEE5;
  }

Setelah itu cari lagi kode </head>

lalu masukan kode dibawah ini sebelum kode </head>

• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
  
  var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
  
  function jsddm_open()
    {  jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
  
  function jsddm_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
  
  function jsddm_timer()
    {  closetimer = window.setTimeout(jsddm_close, timeout);}
  
  function jsddm_canceltimer()
    {  if(closetimer)
    {  window.clearTimeout(closetimer);
    closetimer = null;}}
  
  $(document).ready(function()
    {  $('#jsddm > li').bind('mouseover', jsddm_open)
    $('#jsddm > li').bind('mouseout',  jsddm_timer)});
  
  document.onclick = jsddm_close;
    //]]>
    </script>

Lalu klik save template,,,,,,,

Eits blom selesai,,,,,,,,,sekarang masuk dashboard ----trus page elemen,,,,,,,,

pilih add gadget-----------trus pilih HTML/javascript -----masukkan kode dibawah ini :

• <ul id="jsddm">
    <li><a href="#">Home</a>
    <li><a href="#">Menu 1</a>
    <ul>
    <li><a href="#">Drop 1-1</a></li>
    <li><a href="#">Drop 1-2</a></li>
    <li><a href="#">Drop 1-3</a></li>
    </ul>
    </li>
  
   <li><a href="#">Menu 2</a>
    <ul>
    <li><a href="#">Drop 2-1</a></li>
    <li><a href="#">Drop 2-2</a></li>
    </ul>
    </li>
  
   <li><a href="#">Menu 3</a>
    <ul>
    <li><a href="#">Drop 3-1</a></li>
    <li><a href="#">Drop 3-2</a></li>
    <li><a href="#">Drop 3-3</a></li>
    <li><a href="#">Drop 3-4</a></li>
    </ul>
    </li>
  
   <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    </li></ul> 

NB : Tulisan bercetak tebal bisa anda ganti sesuai keinginan anda
Trus tanda # ganti dengan url pagenya,,,,,

SELAMAT MENCOBA !!!!