Membuat Tab Menu dengan Efek Hover Menggulung

Tab menu dengan efek hover menggulung akan bergulir ketika mouse di arahkan pada tab, dengan sentuhan CSS yang tidak begitu rumit memasang nya.

ok sekarang angel akan tuliskan dengan detail cara memasang kode nya seperti berikut ini.
untuk melihat demo nya disini

• Longin Blog
• Template/edit HTML
• lalu cari kode seperti ini 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

jika kode tersebut tidak ada di template kopy kode tersebut letakan di atas</head>
lalu tambahkan kode di bawah ini dibawah scrip di atas.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#topnav li").prepend("<span></span>");
    $("#topnav li").each(function() {
        var linkText = $(this).find("a").html();
        $(this).find("span").show().html(linkText);
    });
    $("#topnav li").hover(function() {
        $(this).find("span").stop().animate({
            marginTop: "-40"}, 250);},
    function() {
        $(this).find("span").stop().animate({
            marginTop: "0"}, 250);
    });
});
//]]>
</script>

lalu masukan kode CSS di bawah ini tepat diatas ]]></b:skin>

ul#topnav {
  margin:30px;
  padding:0;
  list-style-type:none;
  float:left;
  font-size:1em;
}

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;
  background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x;
  text-transform:uppercase;
  clear:both;
  width:100%;
  height:20px;
  line-height:20px;
}

ul#topnav a {
  color:#555;
  background-position:left bottom;
}

Setelah selesai masuk ke LAYOUT add Widget HTML/JAVA SCRIP lalu masukan kode dibawah ini pada navigasi anda.

<ul id='topnav'>
    <li><a href='#'>home</a></li>
    <li><a href='#'>about me</a></li>
    <li><a href='#'>blog</a></li>
    <li><a href='#'>tips</a></li>
    <li><a href='#'>Kontak</a></li>
    <li><a href='#'>advertise</a></li>
    <li><a href='#'>Bisnis</a></li>
    <li><a href='#'>Google</a></li>
</ul>

setelah itu save, cek kembali ke blog, sesuaikan dengan keinginan anda.