CSS
Taruh diatas kode
]]>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879#slidewrap {
margin: 10px 0 25px 0px;
padding: 0px;
position: relative;
width: 98%;
height: 280px;
overflow: hidden;
float:left;
}
.kwicks {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
/* these are required, but the values are up to you (must be pixel) */
width: 190.5px;
height: 280px;
/*do not change these */
display: block;
overflow: hidden;
padding: 0px; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
display: block;
position: absolute;
right: 0px;
width: 300px;
height: 280px;
z-index: 4;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4bcdUDyP2FeWp6wgXU9-AA9vsO1nyEYu7dQg9tqoS26620kOvqgZh5m42v9A6h6FOa-eZ3-THXyCq2rCADL8DkJSD5MA4bC-7lTvuDOgkaTHG2vAX7gXx90KR3a7xPeeZ4AwCyhCKt2s/s1600/overlay.png) repeat-y scroll top right;
}
.kwicks.horizontal li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 0px; /*Set to same as spacing option. */
float: left;
}
.kwicks.vertical li{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px; /*Set to same as spacing option. */
}
.kwicks .excerpt {
position: absolute;
padding: 10px;
bottom: 0px;
display: block;
width: 100%;
}
.excerpt h2 {
margin-bottom: 10px;
padding: 10px;
background: #fff;
color: #000;
opacity: 0.77;
filter:alpha(opacity=77);
}
.excerpt h2 a, .excerpt h2 a:visited {
color: #000;
font-size:16px;
text-transform:uppercase;
}
.kwicks img {
margin: 0;
padding:0;
}
a.more4 {
background: #fff;
opacity: 0.77;
filter:alpha(opacity=77);
color: #000 !important;
padding: 3px 6px;
font-size: 11px;
}
* {
margin: 0;
padding: 0;
}
JavaScript
Taruh diatas kode
1234567891011121314151617<script type='text/javascript'>
//<![CDATA[
/*
Kwicks for jQuery (version 1.5.1)
Copyright (c) 2008 Jeremy Martin
http://www.jeremymartin.name/projects.php?project=kwicks
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//]]>
</script>
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery('.kwicks').kwicks({
max: 600,
min: 300,
spacing: 0,
duration: 200
});
});
//]]>
</script>
<div id='slidewrap'>
<ul class='kwicks horizontal'>
<li id='kwick_1'>
<span class='fadeout'/>
<div class='excerpt'>
<h2><a href='http://dfc48.blogspot.com/2014/01/download-mod-jutsu-di-naruto-untuk-gta.html' title='MOD Jutsu Naruto GTA SA'>MOD Jutsu Naruto GTA SA</a></h2>
<a class='more4' href='http://dfc48.blogspot.com/2014/01/download-mod-jutsu-di-naruto-untuk-gta.html' title='Read More'>Read More</a>
</div>
<img alt='Popular Post' height='280' src='http://www.hdwallpapers.in/walls/niko_grand_theft_auto_iv-wide.jpg' width='600'/>
</li>
<li id='kwick_2'>
<span class='fadeout'/>
<div class='excerpt'>
<h2><a href='http://dfc48.blogspot.com/2014/01/psikotes-cara-mengecek-anda-feminim.html' title='Cek anda feminim atau maskulin'>Anda Feminim atau Maskulin?</a></h2>
<a class='more4' href='http://dfc48.blogspot.com/2014/01/psikotes-cara-mengecek-anda-feminim.html' title='Read More'>Read More</a>
</div>
<img alt='Popular Post' height='280' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLddaibdPHww0gZQyV4A8agMMVetnlXkkH2EaMPwIh9jYMuTChWbV73VzmaGDnJYKzB2twQy-S4Te1R8y-fKSgLc_zRCSGXSP6wZVrsBDyMMikL4YY9Sa62sBeQeKtzeW1sAcyLXqrDPa/s1600/51.jpg' width='600'/>
</li>
<li id='kwick_3'>
<span class='fadeout'/>
<div class='excerpt'>
<h2><a href='http://dfc48.blogspot.com/2014/01/download-pajama-drive-senshuraku-jkt48_20.html' title='Download Pajadora JKT48 Gen 2'>Pajadora JKT48 Gen 2</a></h2>
<a class='more4' href='http://dfc48.blogspot.com/2014/01/download-pajama-drive-senshuraku-jkt48_20.html' title='Read More'>Read More</a>
</div>
<img alt='Popular Post' height='280' src='http://jkt48project.files.wordpress.com/2014/02/banner_006.jpg' width='600'/>
</li>
<li id='kwick_4'>
<span class='fadeout'/>
<div class='excerpt'>
<h2><a href='http://dfc48.blogspot.com/2014/01/download-kumpulan-mod-gta-san-andreas.html' title='Kumpulan MOD GTA SA'>Kumpulan MOD GTA SA</a></h2>
<a class='more4' href='http://dfc48.blogspot.com/2014/01/download-kumpulan-mod-gta-san-andreas.html' title='Read More'>Read More</a>
</div>
<img alt='Popular Post' height='280' src='http://www.gta4download.biz/images/109-file-name-gta-4-wallpaper-hd-07-download.jpg' width='600'/>
</li>
<li id='kwick_5'>
<span class='fadeout'/>
<div class='excerpt'>
<h2><a href='http://dfc48.blogspot.com/2014/01/cara-install-cleo-dan-skin-img.html' title='Cara Install CLEO dan Skin IMG'>Cara Install CLEO dan Skin IMG</a></h2>
<a class='more4' href='http://dfc48.blogspot.com/2014/01/cara-install-cleo-dan-skin-img.html' title='Read More'>Read More</a>
</div>
<img alt='Popular Post' height='280' src='http://www.rockstargames.com/IV/downloads/wallpapers/billy_2560x1600.jpg' width='600'/>
</li>
</ul>
</div>
</b:if>
</b:if>
0 Response to "Image Slider Keren Dan Responsive Blogger"
Konversi KodeEmoticon