Cara Mudah Membuat Magic Line Navigation Menu pada Blogger

Hallo, kamu mau buat menu magic line menu seperti di bawah ini:

Kalo tertarik yuk ikutin caranya berikut :

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://asenkdotcom.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>
<ul 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=”"><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 deh, selamat mencoba ya..

Bookmark this post:blogger tutorials Social Bookmarking Blogger Widget