• Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat
  • Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat
  • Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat
  • Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat

Label Cloud

Search This Blog

17 May 2010

online counter Membuat Fancy Navigation

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak Membuat Fancy Navigation . Ia akan membuatkan blog korang nampak lain dari orang lain .





1. Login ke Blogspot .

2. Klik Layout - Edit HTML( Tandakan pada kotak Expand widget)

3. Cari kod di bawah


<div id='content-wrapper'>


4. Copy kod dibawah


<ul id='topnav'>
<li><a href='http://msueroomz.blogspot.com/'>Home</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Services</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Twitter</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Blog</a></li>
<li><a href='http://msueroomz.blogspot.com/'>AboutMe</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Email</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Label</a></li>
</ul>


Note: Tukarkan Pada highlight diatas

5. Pastekan diatasnya


6. Cari kod di bawah


</head>


7. Copy kod dibawah


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">


$(document).ready(function() {


$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});


});
</script>


8. Pastekan diatasnya

9. Cari kod di bawah


]]></b:skin>


10. Copy kod dibawah


ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 660px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
}
ul#topnav a {
color: #FFFFFF;
background: url(http://3.bp.blogspot.com/_NGLN8-IACTs/SijR-xmNY3I/AAAAAAAAPSw/EOaH4vs7h1c/s1600/red1.gif) repeat-x left bottom;
}
ul#topnav span {
color: #000000;
background: url(http://4.bp.blogspot.com/_NGLN8-IACTs/SijSQ9weNjI/AAAAAAAAPTQ/KdNBPJffom8/s1600/orange1.jpg) repeat-x left top;
}


Note:Tukarkan pada highlight diatas


11. Pastekan diatasnya

12. Preview dan Save template :okay:yahoo
Tinggalkan Komen Anda Disini