Horizontal Menu With CSS + Jquery

1. Login Ke Blogger kalian
2. Pilih Rancangan ---> EDIT HTML
3. Simpan CSS berikut diatas kode ]]></b:skin>

ul#topnav {margin: 10px 0 20px; padding: 0; list-style: none; font-size: 1.1em; clear: both; float: left; width: 100%; }
ul#topnav li{margin: 0; padding: 0; overflow: hidden; float: left; height:40px; }
ul#topnav a, ul#topnav span { padding: 10px 20px; float: left; text-decoration: none; color: #fff; text-transform: uppercase; clear: both; height: 20px; line-height: 20px; background: #1d1d1d; }
ul#topnav a { color: #7bc441; }
ul#topnav span { display: none; }
ul#topnav.v2 span{ background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top; }
ul#topnav.v2 a{ color: #555; background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;}

4. Kemudian cari kode berikut

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

5. Simpan kode berikut tepat setelah kode diatas.

<ul class="v2" id="topnav">
<li><a href="http://www.blogger.com/" title="HOME">HOME</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=152416724829928001&amp;postID=2556068321468674347#" title="MENU 1">MENU 1</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=152416724829928001&amp;postID=2556068321468674347#" title="MENU 2">MENU 2</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=152416724829928001&amp;postID=2556068321468674347#" title="MENU 3">MENU 3</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=152416724829928001&amp;postID=2556068321468674347#" title="MENU 4">MENU 4</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=152416724829928001&amp;postID=2556068321468674347#" title="MENU 5">MENU 5</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=152416724829928001&amp;postID=2556068321468674347#" title="MENU 6">MENU 6</a></li>
</ul>

6. Simpan Script berikut diatas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
<script type='text/javascript'> $(document).ready(function() { $("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag $("#topnav li").each(function() { //For each list item... var linkText = $(this).find("a").html(); //Find the text inside of the a tag $(this).find("span").show().html(linkText); //Add the text in the span tag }); $("#topnav li").hover(function() { //On hover... $(this).find("span").stop().animate({ marginTop: "-40" //Find the span tag and move it up 40 pixels }, 250); } , function() { //On hover out... $(this).find("span").stop().animate({ marginTop: "0" //Move the span back to its original state (0px) }, 250); }); });
</script>

7. simpan templet.