Home » » Kwicks Menu With JqueryI

Kwicks Menu With JqueryI

Demo


Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :
/* ---------------
kwicks navigation effect
---------------------------------- */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(http://3.bp.blogspot.com/-a_L2MVwf-UM/TV70sac9iUI/AAAAAAAAAQQ/veFBMwgEURQ/s1600/kwicks_sprite.png);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}
#kwick1 {
background-position:0px 0px;
}
#kwick2 {
background-position:-200px 0px;
}
#kwick3 {
background-position:-400px 0px;
}
#kwick4 {
background-position:-600px 0px;
}
#kwick5 {
background-position:-800px 0px;
}
#kwick6 {
background-position:-1000px 0px;
}
#kwick1.active, #kwick1:hover {
background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom;
}
#kwick5.active, #kwick5:hover {
background-position: -800px bottom;
}
#kwick6.active, #kwick6:hover {
background-position: -1000px bottom;
}
#kwick1 a{
background-image:url(end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}
#kwick1 a:hover{
background-position: left -80px;
}
#kwick4 a{
background-image:url(end.jpg);
background-repeat:no-repeat;
background-position: right -40px;
}
#kwick4 a:hover{
background-position: right -120px;
}
8. Selanjutnya simpan kode berikut diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script language='javascript' src='http://kangdadang.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'></script>
<script language='javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
<script type="text/javascript">


9. Simpan kode berikut diatas kode </body> :
<script type='text/javascript'>
 function my_kwicks(){
    $('.kwicks').kwicks({
  duration: 300,   
        max: 200,  
        spacing:  0  
    });
}  
$(document).ready(function(){     
 my_kwicks();
});
</script>

10. Simpan dan penggunaannya pada Html di bawah tag Head-nav(Sesuaikan dengan template anda):
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='Halaman utama'>Beranda</a></li>
<li id='kwick2'><a href='#'>Downloads</a></li>
<li id='kwick3'><a href='#'>Forum</a></li>
<li id='kwick4'><a href='#'>Tentang</a></li>
<li id='kwick5'><a href='#'>Facebook</a></li>
<li id='kwick6'><a href='#'>Tutorial Blogger</a></li>
</ul>

11. Simpan
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .