Custom Images Kwicks Menu With Jquery

Home » Tips Blogger » Custom Images Kwicks Menu With Jquery

Custom Images Kwicks Menu With Jquery

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 :

/* ---------------
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/AVvXsEgOEWNF4Q_tVpC8Lk2OzlfkMcUG_DK8GEbVg3aFSnnSdcYIiYHcMLK8916ydM6Xat5kgk8npLpQDl0ADTNb_CAoJn3ygjbZPlF7LohRs9tnUuC0CXlNTGuAuK7fiqLMk3k_VMY-MPqyiq0/s1600/landscapes.jpg) repeat scroll 0%;

}

.jimgMenu ul li#people a {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2JzV-mcxYRRcQCxJrAnMjteus2dCJFvF8ZseQv5pzy4qe0q9N27ZgV2uDMIYqfNzy2nFImULtylOoUMPLOwWI_tNlYwk6V2tJ3lnXnF5hWq9k0dRla_d4GaOXGW2YWU7Ih-bydwB8xQ/s1600/people.jpg) repeat scroll 0%;

}

.jimgMenu ul li#nature a {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiyKdNmWOPWGgnEG4EBYjHi4HA2pJ14HMvkYipZU6_TYugsxxW8IodBfWa619MDHaLPD7W4aLG6KMdrHTbwzeJ-7qvDWqSp2Pu3DwF_cZPv5X1rR5HhilnY66TjefM9CZ1gO2kedGTqU/s1600/nature.jpg) repeat scroll 0%;

}

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

}

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

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

9. Save

10. dan yang terakhir cara penyimpanannya pada Html (sesuai keinginan anda 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>