Custom Images kwicks menu with jquery
- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- 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/AVvXsEgtLxVPeYYcoXcNtUyil8BzX92AjImqhsVkDhUCZwXK-oECzQqfcAwRSZqdsIQBEAE1AhyphenhyphenOMd4MMhRxQSY50qjo6XTe3cBZx2mZDNv7zQT3r4TYnJzo_310FC0H3sD1z3FJFxz13of2KAI/s1600/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li#people a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc4T4iCqZuEsv43vOZHjz1TvfLegYYBHUgOlUKT8Msl2GtT9x8HZQ1GVVv3-SaAXRGXlN3was4EcG-1yEv2pMOH9G2Es831oLPvFP2mFL-mQisf3ZVMTyCCcLYRXhkPg-Ye14h9fnIEd8/s1600/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li#nature a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi18LyY8eQcHlfxmwrDaCl641GP6j4GVEbWOTa39iYpmO_o8_BbTl7ZqepC-76RD2ZI_vaHyNjQi0oAQjTUNniFWgybG_jZTQpcvpvYYXjWKE6qgZG6VsIzaMZkTG2FB3hyphenhyphen_YYXZjBNfLA/s1600/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li#abstract a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN69guG6vwsRFcEaowYmj5X89sa-nYWLrttUwijqSJPtdwwOI4A_NLAASAIXmnVYsGLZNwsgv9LC6Olezs4bZS7Md0viG9ONimQzymW-d_gjew1k0KEvp2HhdxbGLZtnw-RtM1XqBYS08/s1600/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFrdW9bD6YsUM1ojD4_RVc7lS2k-_VNiLlb0PRDUFdpWpT_tnpnoi8qE1I4AQ9wilbfiLIw0DafQrzGuuT743yxXKZ2x37M2vn9WOu4gjo8KVHf6lk5ULu4DViW_ddaR5HLCGLGZLGt8/s1600/urban.jpg) repeat scroll 0%;
border-right-style: none;
}
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/AVvXsEgtLxVPeYYcoXcNtUyil8BzX92AjImqhsVkDhUCZwXK-oECzQqfcAwRSZqdsIQBEAE1AhyphenhyphenOMd4MMhRxQSY50qjo6XTe3cBZx2mZDNv7zQT3r4TYnJzo_310FC0H3sD1z3FJFxz13of2KAI/s1600/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li#people a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc4T4iCqZuEsv43vOZHjz1TvfLegYYBHUgOlUKT8Msl2GtT9x8HZQ1GVVv3-SaAXRGXlN3was4EcG-1yEv2pMOH9G2Es831oLPvFP2mFL-mQisf3ZVMTyCCcLYRXhkPg-Ye14h9fnIEd8/s1600/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li#nature a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi18LyY8eQcHlfxmwrDaCl641GP6j4GVEbWOTa39iYpmO_o8_BbTl7ZqepC-76RD2ZI_vaHyNjQi0oAQjTUNniFWgybG_jZTQpcvpvYYXjWKE6qgZG6VsIzaMZkTG2FB3hyphenhyphen_YYXZjBNfLA/s1600/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li#abstract a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN69guG6vwsRFcEaowYmj5X89sa-nYWLrttUwijqSJPtdwwOI4A_NLAASAIXmnVYsGLZNwsgv9LC6Olezs4bZS7Md0viG9ONimQzymW-d_gjew1k0KEvp2HhdxbGLZtnw-RtM1XqBYS08/s1600/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFrdW9bD6YsUM1ojD4_RVc7lS2k-_VNiLlb0PRDUFdpWpT_tnpnoi8qE1I4AQ9wilbfiLIw0DafQrzGuuT743yxXKZ2x37M2vn9WOu4gjo8KVHf6lk5ULu4DViW_ddaR5HLCGLGZLGt8/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.....<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>
dan yang terakhir cara penyimpanannya pada Html (sesuai keinginan kawan-kawan tata letaknya):
selesai.......
Show
0 Comments
prev
next