Kustom Gambar kwicks menu dengan jquery

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

/* ---------------
 Custom image kwicks with jquery
---------------------------------- */

.jimgMenu {
    position:relative;
    margin: 0px 0px 0px 50px;
    padding: 0px;
    width:475px;
    height:200px;
    overflow: hidden;
}

.jimgMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 200px;
    position: relative;
    }
  
.jimgMenu ul li {
    width: 95px;
    float: left;
    display: block;
    overflow: hidden;
}

.jimgMenu ul li a {
    text-indent: -1000px;
    background:#fff repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow: hidden;
    height: 200px;
}

.jimgMenu ul li#landscapes a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixaHpyjLDJeoGlEzwm_YGiXYOK-GtM5-BZv1Uc5gsJyGl9SezDrgVmuinISWzCTnMXTqkMdWvGVlhJJf-uT7WcB9tswS_SGEWyjD8LqR4o2-zTXSSiv6PJgOPjSgWeLF-sjRpqUAuJoKs/s1600/landscapes.jpg) repeat scroll 0%;
 
}

.jimgMenu ul li#people a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfKCgG_zCWFecqCFaS9ADsQig_Uz4ZXdU3u5JW-iJ7-7gppWmfaDepUesJtfBPTF9IdaslRnW5QcMcvjOgDkqdRq7wrendSBtXTU_onPvTb-qkHlk0p5i0kLQkQWUIT1qTQDa8XPMqRVg/s1600/people.jpg) repeat scroll 0%;

}

.jimgMenu ul li#nature a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDb-3Sfw8UVE1qPdoSEZE2PyTwtXcDXXn5SAGcIWZRCCFvmpfpdPd7j15oljojn_mSDuQxY9zHsETgg3Fzl_akW-gs_xMJhwbWhnvP7SUfvTFI7xvoTF5DnhOyXuaxgzdThock8BExTI/s1600/nature.jpg) repeat scroll 0%;
 
}

.jimgMenu ul li#abstract a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcgXD4UwouYE_HRGubo7UNsIPu8SYWynI_sDOGqUoEbKB7POU6tWCW8_MvslAeH8YZiHhnuju4pbU6ETFSYh0QkztKDkfXYCbJI7mHQ4nM7jyny4r_FIanBpl0tlF1sns1a4mFmMHuvs/s1600/abstract.jpg) repeat scroll 0%;

}

.jimgMenu ul li#urban a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0RT8Vd2P_Vxt2fUJ7uyuvsbaVaPRJB-Bf1PLumhrBGmvkDrHyzVriYFcO1nXLX8HuqPoXGz71TA4dJLgepVjwPxNq6FcJ9wXPomb7pVtyjMxtuv7mBWXDnf68cbD2T3njuWXth3Hq_ng/s1600/urban.jpg) repeat scroll 0%;
    border-right-style: none;
}

selanjutnya simpan script berikut tepat di atas kode  </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
    $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
    });
</script>

simpan template.....

dan yang terakhir cara penyimpanannya pada Html (sesuai keinginan kawan-kawan tata letaknya):

<div class="jimgMenu">
  <ul class="jimgMenu">
    <li id="landscapes"><a href="#">Landscapes</a></li>
    <li id="people"><a href="#">People</a></li>
    <li id="nature"><a href="#">Nature</a></li>
    <li id="abstract"><a href="#">Abstract</a></li>
    <li id="urban"><a href="#">Urban</a></li>
  </ul>
</div>

selesai.......