Magic Line Navigation Menu

Cara membuatnya :

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

/*----------------
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;
}

4.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>

5. Simpan template.
6.terakhir cara pemanggilannya: Tata Letak-HTML/Script

<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>

6.Simpan dan lihat perubahannya. Selamat mencoba...

sumber: