Cara membuat Magic line navigation menu

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya : 

/*----------------
Magic line navigation
--------------------------*/
.nav-wrapline{
    background:-moz-linear-gradient(top, #051547, #888, #051547);
-moz-box-shadow:0px 2px 2px #111;
    width: 500px;
    border: solid 1px #FFF;
    height: 30px;
    -moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.group:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both; height: 0;
      margin: 50px auto;
     background-color: rgba(0,0,0,0.6);
     border-top: 2px solid #FFF;
     border-bottom: 2px solid #FFF;
     width: 500px;
     }
*:first-child+html .group {
     zoom: 1;
     } /* IE7 */
#magic-line {
     position: absolute; bottom: -2px; left: 0;
     width: 100px; height: 2px;
     background: #fe4902;
     }

#magic {
     margin: 0 auto;
     list-style: none;
     position: relative;
     width: 500px;
     }
#magic li {
     display: inline;

     }
#magic li a {
     position: relative; z-index: 200;
     color: #bbb; font-size: 14px;
     display: block; float: left;
     padding: 6px 10px 4px 10px;
     text-decoration: none;
     text-transform: uppercase;
     }
#magic li a:hover {
     color: white;
     }
#magic #magic-line-two {
     position: absolute; top: 0;
     left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff; }

.current_page_item a, .current_page_item_two a {
     color: white !important;
     }


dan simpan kode ini diatas </head> :


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="http://kangdadang.googlecode.com/files/jcolor.js"></script>

 <script type="text/javascript">
    $(function(){

    var $el, leftPos, newWidth,
        $mainNav2 = $("#magic");

    $mainNav2.append("<li id='magic-line-two'></li>");
  
    var $magicLineTwo = $("#magic-line-two");
  
    $magicLineTwo
        .width($(".current_page_item_two").width())
        .height($mainNav2.height())
        .css("left", $(".current_page_item_two a").position().left)
        .data("origLeft", $(".current_page_item_two a").position().left)
        .data("origWidth", $magicLineTwo.width())
        .data("origColor", $(".current_page_item_two a").attr("rel"));
              
    $("#magic li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLineTwo.stop().animate({
            left: leftPos,
            width: newWidth,
            backgroundColor: $el.attr("rel")
        })
    }, function() {
        $magicLineTwo.stop().animate({
            left: $magicLineTwo.data("origLeft"),
            width: $magicLineTwo.data("origWidth"),
            backgroundColor: $magicLineTwo.data("origColor")
        });  
    });
});

</script>


terakhir cara pemanggilannya pada HTML (tempatkan ssuai keinginan dan template kawan-kawan):


<div class="nav-wrapline">
      
        <ul class="group" id="magic">
            <li style=""><a rel="#fe4902" href="#">Home</a></li>
            <li style=""><a rel="rgba(50,69,12,0.9)" href="#">Mobile Download</a></li>
            <li style=""><a rel="rgba(113,116,0,0.9)" href="#">About</a></li>

            <li style="" class="current_page_item_two"><a rel="rgba(220,133,5,0.9)" href="#">Facebook</a></li>
            <li style=""><a rel="rgba(236,85,25,0.9)" href="#">Twitter</a></li>

</ul>
      </div>


selesai.....