Kwicks Menu with jQuery

Sekarang kita coba membuat Kwicks Menu dengan jQuery, nih sedikit gambarnya

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

<br /> /* ---------------<br /> kwicks navigation effect<br /> ---------------------------------- */<br /> .kwicks {<br /> list-style: none;<br /> position: relative;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> .kwicks li{<br /> display: block;<br /> overflow: hidden;<br /> padding: 0;<br /> cursor: pointer;<br /> float: left;<br /> width: 125px;<br /> height: 40px;<br /> margin-right: 0px;<br /> background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUe7M9QKM6ehm_emP1RGDRyrZTiql-9IPrNMz0NHx90lDrN0OaqktWk_Ya-1Exi121kWkkpjYmT935faM5L4CKP28uy12yOhY2ye2SFGGFQcEjdQnoeHc9ZXufq-G35Pkc8cqfEXv3HU/s1600/kwicks_sprite.png);<br /> background-repeat:no-repeat;<br /> }<br /> .kwicks a{<br /> display:block;<br /> height:40px;<br /> text-indent:-9999px;<br /> outline:none;<br /> }<br /> #kwick1 {<br /> background-position:0px 0px;<br /> }<br /> #kwick2 {<br /> background-position:-200px 0px;<br /> }<br /> #kwick3 {<br /> background-position:-400px 0px;<br /> }<br /> #kwick4 {<br /> background-position:-600px 0px;<br /> }<br /> #kwick5 {<br /> background-position:-800px 0px;<br /> }<br /> #kwick6 {<br /> background-position:-1000px 0px;<br /> }<br /> #kwick1.active, #kwick1:hover {<br /> background-position: 0 bottom;<br /> }<br /> #kwick2.active, #kwick2:hover{<br /> background-position: -200px bottom;<br /> }<br /> #kwick3.active, #kwick3:hover {<br /> background-position: -400px bottom;<br /> }<br /> #kwick4.active, #kwick4:hover {<br /> background-position: -600px bottom;<br /> }<br /> #kwick5.active, #kwick5:hover {<br /> background-position: -800px bottom;<br /> }<br /> #kwick6.active, #kwick6:hover {<br /> background-position: -1000px bottom;<br /> }<br /> #kwick1 a{<br /> background-image:url(end.jpg);<br /> background-repeat:no-repeat;<br /> background-position: left 0px;<br /> }<br /> #kwick1 a:hover{<br /> background-position: left -80px;<br /> }<br /> #kwick4 a{<br /> background-image:url(end.jpg);<br /> background-repeat:no-repeat;<br /> background-position: right -40px;<br /> }<br /> #kwick4 a:hover{<br /> background-position: right -120px;<br /> }<br />

4. Selanjutnya simpan kode berikut diatas kode </head> :

<br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /> <script language='javascript' src='http://kangdadang.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'></script><br /> <script language='javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script><br /> <script type="text/javascript">

5. 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>

 6.  Simpan pemanggilannya pada Html di bawah tag Head-nav(Sesuaikan dengan template kawan):

<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>