Membuat Menu Jquery

Sobat semuanya para pecinta blog, atau Blogger mania, kali ini saya akan sedikit menjelaskan bagaimana cara membuat menu jquery tentunya pada Blogspot.
sampelnya seperti gambar di atas, atau disini

1. Masukan script jQuery berikut diatas </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
:: Catatan: Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

2. Masukan kode Javascript berikut dibawah script jQuery tadi:

<script type='text/javascript'>
function mainmenu(){
$(&quot; #nav ul &quot;).css({display: &quot;none&quot;}); // Opera Fix
$(&quot; #nav li&quot;).hover(function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;visible&quot;,display: &quot;none&quot;}).show(400);
},function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;hidden&quot;});
});
}
$(document).ready(function(){
mainmenu();
});
</script>
<!-- end dropdown menu-->

3. Masukan kode HTML berikut sebelum <div id='header-wrapper'> (penempatan lainnya bisa juga dibawah header):

<!-- Menu HTML -->
<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>jQuery &#187;</a>
<ul>
<li><a href='#'>Tutorial &#187;</a>
<ul>
<li><a href='http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html'>Back to Top</a></li>
<li><a href='http://deconstructioncode.blogspot.com/2009/07/link-nudging-di-blogger-template.html'>Link Nudging</a></li>
</ul>
</li>
<li><a href='#'>Plugin</a></li>
<li><a href='#'>News</a></li>
</ul>
</li> <div class='clear'/>
</ul>
:: Catatan: isi dari konten tiap menu ini perlu anda rubah sesuai yang anda inginkan.

4. Masukan kode CSS berikut:

/* menu
*/
#nav{
background-color: #eee;
border: 1px solid #cccccc;
}
#nav, #nav ul{
width: 760px;
margin:0px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
text-align:left;
}

#nav a{
display:block;
padding:2px 10px;
border:1px solid #212421;
color:#fff;
text-decoration:none;
background-color:#212421;
}

#nav a:hover{
background-color:#333;
}

#nav li{
float:left;
position:relative;
padding:0px 5px;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:100%;
left:0;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:13em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

:: Catatan: kode css ini perlu anda sesuaikan dengan karakter template anda.

5. Save template, selesai.