-->

Kode Script Slideshow Carousel

<style>
#featured-wrap{border-bottom:1px solid #3C3A3D;box-shadow: 4px 4px 12px 0px #1A1818; background:#690889;position:relative;height:175px;margin:0 auto}
#featured{border:3px solid #FFFFFF;outline:0px solid #107919;position:relative;width:88%;height:150px;overflow:hidden;top:13px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:150px;display:inline-block;float:left;height:150px;background:#FFFF00;box-shadow: -4px 4px 35px 0px #1A1818;}
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #545157}
.thumb-featured img{display:block;width:154px;height:98px;border:3px solid #fff;}
.title-featured{text-align:center;position:none;margin-top:7px}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#4B006F url(https://lh5.googleusercontent.com/-fgJF4xfwZiI/Uo9o8L5lRLI/AAAAAAAAGnw/YItb5JVccVM/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:70px;top:50px;text-indent:-9999px;border:1px solid #58545F;box-shadow: -2px 4px 13px 0px #1A1818}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{background: url("https://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/h42/loading.gif") #000000;background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}
</style>

<script>
var numpostx = 15,
thumbSize = 110,
contjumlah = 0,
cmtext = "Comments",
pBlank = "https://lh5.googleusercontent.com/-mSufUJ214bg/Uo94DjMjnbI/AAAAAAAAGoA/1q7su-tZBkc/h120/no-image.jpg",
pkBlank = "https://lh6.googleusercontent.com/-UZxZHJ71o1A/Uo95CAOG-7I/AAAAAAAAGoI/8hk05V-amCo/h120/no-avatar.jpg",
numcomment = 5,
thumbcsize = 70,
cmsumm = 800;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default/-/label?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumb-featured"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"title="'+b+'" /></span></a></div><div class="title-featured"><h4><a href="'+k+'" title="'+b+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#featured").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back">&lt;</a><a href="#" class="arrow forward">&gt;</a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#featured-wrap").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#featured-wrap").trigger("next")}},8000)}else{$("#featured").html("<span>No result!</span>")}},error:function(){$("#featured").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+m+'"><span><img src="'+a+'" title="'+g+'" alt="'+g+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'" title="'+g+'" class="tooltip">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")}})});
</script>

<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>loading....</span>
</div>
</div>

Berikut setingan yang perlu Anda lakukan.
  1. Jika terjadi error pada tampilan slide cari kode ini " title-featured{text-align:center;position:none;margin-top:7px} " ganti tulisan position menjadi relative.
  2. Untuk mengatur jumlah tampilan gambar slidenya cari kode " var numpostx = 15 " silahkan ganti sesuai selera.
  3. Edit sendiri kode css untuk memodifikasi warna, ukuran dan lainnya.
  4. Ganti tulisan label dengan URL label blog Anda.

     

    temukan artikelmu disini