Demonya bisa dilihat disini
dan simpan kode ini diatas </head> :
terakhir cara pemanggilannya pada HTML (tempatkan ssuai keinginan dan template kawan-kawan):
selesai.....
Selengkapnya...
- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- 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;
}
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>
<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):
selesai.....
