Label Cloud

Search This Blog

19 May 2010

online counter Horizon Sub Navigation Versi 2 Yang Lebih Cool

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat horizon sub navigation yang lebih cool dari yang sebelum ini . Korang boleh tengok tutorialnya disini --> Sub Navigation





1. Login ke Blogspot .

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

3. Cari kod di bawah


]]></b:skin>


4. Copy kod dibawah


ul#topnav {
margin: 0; padding: 0;
float: left;
width: 660px;
list-style: none;
position: relative;
font-size: 1.2em;
background: #C86595;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border: 3px outset #EC0982;
}
ul#topnav li:hover {
border: 3px inset #EC0982;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #FFFFFF;
text-decoration: none;
}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 660px;
background: #F83A9F;
border: outset 3px #EC0982;
-moz-border-radius: 10px;

}
ul#topnav li:hover span {
display: block;
}
ul#topnav li span a {
display: inline;
}
ul#topnav li span a:hover {
text-decoration: underline;
color: #000000;
font-weight:bold;
border: inset 3px #EC0982;
-moz-border-radius: 10px;

}


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() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item
$(this).css({ &#39;background&#39; : &#39;#F83A9F &#39;}); //Add background color and image on hovered list item
$(this).find(&quot;span&quot;).show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background
$(this).find(&quot;span&quot;).hide(); //Hide the subnav
});

});
</script>


Note :Gantikan Highlight hijau diatas dengan kod warna mengikut citarasa korang . Highlight hijau berkenaan lokasinya adalah seperti yang image dibawah




8. Pastekan diatasnya

9. Cari kod di bawah


<div id='content-wrapper'>


10. Copy kod dibawah


<ul id='topnav'>
<li><a href='http://msueroomz.blogspot.com/'>Home</a></li>

<li>
<a href='#'>About</a>
<span>
<a href='http://msueroomz.blogspot.com/'>The Company</a>
<a href='http://msueroomz.blogspot.com/'>The Team</a>
<a href='http://msueroomz.blogspot.com/'>Careers</a>
</span>
</li>

<li>
<a href='#'>Services</a>
<span>
<a href='http://msueroomz.blogspot.com/'>What We Do</a>
<a href='http://msueroomz.blogspot.com/'>Our Process</a>
<a href='http://msueroomz.blogspot.com/'>Testimonials</a>
</span>
</li>

<li>
<a href='#'>Portfolio</a>
<span>
<a href='http://msueroomz.blogspot.com/'>Website</a>
<a href='http://msueroomz.blogspot.com/'>Development</a>
<a href='http://msueroomz.blogspot.com/'>Identity</a>
<a href='http://msueroomz.blogspot.com/'>SEO</a>
<a href='http://msueroomz.blogspot.com/'>Design</a>
</span>
</li>

<li><a href='http://msueroomz.blogspot.com/'>Contact</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Email Me</a></li>

<li>
<a href='#'>Social Web</a>
<span>
<a href='http://msueroomz.blogspot.com/'>Twitter</a>
<a href='http://msueroomz.blogspot.com/'>Facebook</a>
</span>
</li>

</ul>



Note: Tukarkan Pada highlight diatas

11. Pastekan diatasnya

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