Cara Membuat Slider Carousel Dengan Tombol Next Previous

Carousel adalah istilah lain dari kata Slider dalam artian menampilkan beberapa unit gambar dalam sebuah kotak atau sidebar secara berurutan dengan rentang waktu yang telah ditentukan dengan ukuran thumbnail gambar, jenis, ukuran serta jumlah teks yang akan ditampilkan diatur oleh sebuah script serta CSS/style yang sudah dipadukan menjadi satu kesatuan yang tak terpisahkan.

Carousel Slider yang saya bagikan ini membutuhkan tempat yang berbentuk memanjang dan bisa ditempat di bawah header atau diatas bagian posting dengan menempatkan div id dan div class pada bagian tersebut. Untuk lebih jelasnya, silahkan ikuti tutorial berikut.

CSS dibawah bisa di letakkan di bagian style yaitu antara <style> dan </style> atau <b:skin><![CDATA[ dan */]]></b:skin>

#carousel{width:970px;height:125px;border-bottom:0px solid #ccc;position:relative;display:block;background:transparent}

#carousel h5{color:#555;margin:2px}

#carousel .container{position:absolute;left:24px;width:915px;height:125px;overflow:hidden}

#carousel .thumb{float:left;margin-right:5px;}

#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkwmsdu8r51UeqWm0P9mtQ6SNaeA5AfLWXE7LB6S7o82s0amfRcUsSc9F4ipge1wlHANSOD6YXkunSrlRVecE0uEAhUt-0YWMytHMo-j-MTTGTGu1HNjAAqXi8O19j1Ktf-KlQvj9T0RMe/s1600/previous.png) center;z-index:100;cursor:pointer;}

#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43jYiti932N19JM5iabR1QjzFGMfeQgZjxK1hcxq8YS8DQBBf9AbrA9GBl7n8b8xEnx_y07YTt4XORbWDQGYPlD1hURtpV-DuXx_FdPoBpPNd8WycJC7CXPZWP46RuXc6FKVipnx4iEG5/s1600/next.png) center;z-index:100;cursor:pointer;}

#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:209px;height:90px;margin:0 2px 20px 6px;padding:6px}

#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}

.catbox-even{background:#eddbf7;border:0px solid #bebebe;width:318px;padding-bottom:5px;margin-bottom:10px}

.catbox-even li{border-bottom:1px solid #caa0e2;font-size:12px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS5X8tMx21g8ubcYAeuIIQuG5XfF1wPHMutNngXgyqs0EiDgbYrA-6UU-cnmrAGpZgonaSAA7qQMKi-bShPpZLSzZfeRt4bSidSbJY2zXASVRGwqpYJPIpUcEq_-8pRtmADm8boGFfYNk/s1600/arrowList_2.gif) no-repeat 0 4px;margin:0 10px;padding:5px 0 5px 11px}

.catbox-even li.first{display:block;font-family:Arial,serif;font-size:12px;border-top:0;background:none;padding:0}

.catbox-even .entry-thumb{float:left;margin-right:10px}

.catbox-even .entry-title{font-size:13px}

Secara berurutan letakkan script di bawah ini, dari satu sampai tiga tepat diatas </head>.

Script 1.

<script type='text/javascript'>

//<![CDATA[

(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery);

//]]>

</script>

Script 2.

<script type='text/javascript'>

//<![CDATA[

var featuredcontentslider={

//3 variables below you can customize if desired:

ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',

bustajaxcache: true, //bust caching of external ajax page after 1st request?

enablepersist: true, //persist to last content viewed when returning to page?



settingcaches: {}, //object to cache "setting" object of each script instance



jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.

 this.turnpage(this.settingcaches[fcsid], pagenumber)

},

ajaxconnect:function(setting){

 var page_request = false

 if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)

  try {

  page_request = new ActiveXObject("Msxml2.XMLHTTP")

  }

  catch (e){

   try{

   page_request = new ActiveXObject("Microsoft.XMLHTTP")

   }

   catch (e){}

  }

 }

 else if (window.XMLHttpRequest) // if Mozilla, Safari etc

  page_request = new XMLHttpRequest()

 else

  return false

 var pageurl=setting.contentsource[1]

 page_request.onreadystatechange=function(){

  featuredcontentslider.ajaxpopulate(page_request, setting)

 }

 document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg

 var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

 page_request.open('GET', pageurl+bustcache, true)

 page_request.send(null)

},

ajaxpopulate:function(page_request, setting){

 if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

  document.getElementById(setting.id).innerHTML=page_request.responseText

  this.buildpaginate(setting)

 }

},

buildcontentdivs:function(setting){

 var alldivs=document.getElementById(setting.id).getElementsByTagName("div")

 for (var i=0; i<alldivs.length; i++){

  if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"

   setting.contentdivs.push(alldivs[i])

    alldivs[i].style.display="none" //collapse all content DIVs to begin with

  }

 }

},

buildpaginate:function(setting){

 this.buildcontentdivs(setting)

 var sliderdiv=document.getElementById(setting.id)

 var pdiv=document.getElementById("paginate-"+setting.id)

 var phtml=""

 var toc=setting.toc

 var nextprev=setting.nextprev

 if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){

  for (var i=1; i<=setting.contentdivs.length; i++){

   phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '

  }

  phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')

  pdiv.innerHTML=phtml

 }

 var pdivlinks=pdiv.getElementsByTagName("a")

 var toclinkscount=0 //var to keep track of actual # of toc links

 for (var i=0; i<pdivlinks.length; i++){

  if (this.css(pdivlinks[i], "toc", "check")){

   if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)

    pdivlinks[i].style.display="none" //hide this toc link

    continue

   }

   pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link

   pdivlinks[i][setting.revealtype]=function(){

    featuredcontentslider.turnpage(setting, this.getAttribute("rel"))

    return false

   }

   setting.toclinks.push(pdivlinks[i])

  }

  else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"

   pdivlinks[i].onclick=function(){

    featuredcontentslider.turnpage(setting, this.className)

    return false

   }

  }

 }

 this.turnpage(setting, setting.currentpage, true)

 if (setting.autorotate[0]){ //if auto rotate enabled

  pdiv[setting.revealtype]=function(){

   featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

  }

  sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on

   featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

  }

  setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation

  this.autorotate(setting)

 }

},

urlparamselect:function(fcsid){

 var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL

 return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

},

turnpage:function(setting, thepage, autocall){

 var currentpage=setting.currentpage //current page # before change

 var totalpages=setting.contentdivs.length

 var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)

 turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust

 if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly

  return

 setting.currentpage=turntopage

 setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex

 this.cleartimer(setting, window["fcsfade"+setting.id])

 setting.cacheprevpage=setting.prevpage

 if (setting.enablefade[0]==true){

  setting.curopacity=0

  this.fadeup(setting)

 }

 if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)

  setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")

  setting.onChange(setting.prevpage, setting.currentpage)

 }

 setting.contentdivs[turntopage-1].style.visibility="visible"

 setting.contentdivs[turntopage-1].style.display="block"

 if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)

  this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")

 if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)

  this.css(setting.toclinks[turntopage-1], "selected", "add")

 setting.prevpage=turntopage

 if (this.enablepersist)

  this.setCookie("fcspersist"+setting.id, turntopage)

},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)

 var targetobject=setting.contentdivs[setting.currentpage-1]

 if (targetobject.filters && targetobject.filters[0]){ //IE syntax

  if (typeof targetobject.filters[0].opacity=="number") //IE6

   targetobject.filters[0].opacity=value*100

  else //IE 5.5

   targetobject.style.filter="alpha(opacity="+value*100+")"

 }

 else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax

  targetobject.style.MozOpacity=value

 else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax

  targetobject.style.opacity=value

 setting.curopacity=value

},

fadeup:function(setting){

 if (setting.curopacity<1){

  this.setopacity(setting, setting.curopacity+setting.enablefade[1])

  window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)

 }

 else{ //when fade is complete

  if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)

   setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")

  setting.onChange(setting.cacheprevpage, setting.currentpage)

 }

},

cleartimer:function(setting, timervar){

 if (typeof timervar!="undefined"){

  clearTimeout(timervar)

  clearInterval(timervar)

  if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div

   setting.contentdivs[setting.cacheprevpage-1].style.display="none"

  }

 }

},

css:function(el, targetclass, action){

 var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")

 if (action=="check")

  return needle.test(el.className)

 else if (action=="remove")

  el.className=el.className.replace(needle, "")

 else if (action=="add")

  el.className+=" "+targetclass

},

autorotate:function(setting){

 window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])

},

getCookie:function(Name){

 var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair

 if (document.cookie.match(re)) //if cookie found

  return document.cookie.match(re)[0].split("=")[1] //return its value

 return null

},

setCookie:function(name, value){

 document.cookie = name+"="+value

},

init:function(setting){

 var persistedpage=this.getCookie("fcspersist"+setting.id) || 1

 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index

 this.settingcaches[setting.id]=setting //cache "setting" object

 setting.contentdivs=[]

 setting.toclinks=[]

 setting.topzindex=0

 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)

 setting.prevpage=setting.currentpage

 setting.revealtype="on"+(setting.revealtype || "click")

 setting.curopacity=0

 setting.onChange=setting.onChange || function(){}

 if (setting.contentsource[0]=="inline")

  this.buildpaginate(setting)

 if (setting.contentsource[0]=="ajax")

  this.ajaxconnect(setting)

}

}

//]]>

</script>

Script 3.

<script type='text/javascript'>

//<![CDATA[

imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-LKQ_I7SMyoIxvdjIjMQFnt9vKOlqbn8hSlpYdZzzEPLLLMMQJiBgWlN-2zIJI-tQhsELxfStKG6v4zLDtBzAYtAweJpv8MOLef7nC-XiMf2K77RaUvUjs9okQQN77iFT65y48_Ekkk/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=100;summaryPost1=140;summaryTitle=25;numposts1=12;numposts2=6;numposts3=4;numposts4=4;numposts5=10;numposts6=5;numposts7=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}document.write('</ul>')}function showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_skindesign"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><div class="play-button"><a href="'+posturl+'"><img class="skindesign_img" src="'+img[i]+'"/></a></div><div class="clear"></div></div>';document.write(trtd);j++}}function showrecentposts3(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts3;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="contentdiv"><a href="'+posturl+'"><img width="360" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';document.write(trtd);j++}}function showrecentposts4(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts3;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li><a class="toc" href="#"><img width="84" height="54" class="alignnone" src="'+img[i]+'"/></a></li>';document.write(trtd);j++}}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts4<=json.feed.entry.length){maxpost=numposts4}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';if(i==0){var trtd='<li class="first"><div class="entry-thumb"><a href="'+posturl+'"><img width="110" height="80" src="'+img[i]+'"/> </a></div><h2 class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></h2><div class="entry-meta"><span class="meta-date">'+daystr+'</span></div><div class="entry-excerpt"><p>'+removeHtmlTag(postcontent,summaryPost)+'...    <a href="'+posturl+'" class="meta-more">Read more <span class="meta-nav"></span></a></p></div></li>';document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<li class="catlist"><a href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd)}j++}}function showrecentposts6(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li><a href="'+posturl+'">'+posttitle+' </a></li>';document.write(trtd);j++}}function showrecentposts7(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts6<=json.feed.entry.length){maxpost=numposts6}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';if(i==0){var trtd='<div class="bottomBox_wide left"><div class="thumb"><a href="'+posturl+'"><img width="190" height="140" src="'+img[i]+'"/></a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost1)+'... <a href="'+posturl+'">Read More »</a></p><div class="clear"></div></div></div><ul><div class="bottomBox_narrow right">';document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<li><a href="'+posturl+'">'+posttitle+' </a></li>';document.write(trtd)}j++}document.write('</ul></div>')}

//]]>

</script>

Apabila pada template anda belum ada jquery dibawah ini bisa ditambahkan juga.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Penempatan script dibawah ini adalah diatas kode </body>

<script type='text/javascript'>

(function($) {  $(document).ready(function(){

$(&quot;#carousel .container&quot;).jCarouselLite({

 auto:4000,

 scroll: 2,

 speed: 800, 

 visible: 4,

 start: 0,

 circular: true,

 btnPrev: &quot;#previous_button&quot;,

 btnNext: &quot;#next_button&quot;

 });

 })})(jQuery) 

</script>

Nilai pada teks box merah diatas bisa disesuaikan dengan keinginan anda.

Dan ini adalah bagian terakhir yaitu penempatan Carousel Slider pada bagian yang akan ditentukan sebagai tempat di tampilkannya Slider, dan ini adalah bagian yang perlu sedikit kejelian untuk penempatannya agar tidak mengubah atau bahkan merusak tampilan dari template anda. Tempatkan script dibawah sesudah </div> penutup pada bagian susunan template.

<div id='carousel'>

<div id='previous_button'/>

<div class='container'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script> 

<div class='clear'/>

</div>

<div id='next_button'/>

</div>

Perlu diingat bahwah Carousel Slider diatas akan menampilkan posting terbaru secara otomatis dengan jumlah posting yang bisa ditentukan sendiri melalui nilai pada script terakhir.

Demikian tutorial sederhana ini, mudah-mudahan bermanfaat. Tidak lupa juga Script dan CSS diatas saya dapat dari template maskolis, jika kurang dipahami silahkan tinggalkan pesan.