Subscribe to our RSS Feeds
Hello, selamat datang di rumah blog saya. Komputer adalah jantungku dan hidupku belum lah sempurna bila belum kujelajahi seisi dunia tanpa harus menuju kesana. Nikmati perjalanan anda dengan berpetualang ilmu di dunia blog saya ini.

**Jangan Lupa Follow Ira Chan Yaahh**



Cara Mudah Membuat Magic Line Navigation Menu pada Blogger

0 Comments »

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..
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook

17.57

0 Responses to "Cara Mudah Membuat Magic Line Navigation Menu pada Blogger"

Poskan Komentar