Cara Membuat Slider Carousel Terbaik Sepanjang Masa

Membuat slider carousel merupakan pekerjaan yang begitu sulit apalagi harus memahami kode css dan javascriptnya. Slider ini merupakan hasil modifikasi yang saya buat, dan slider ini dimodifikasi hanya untuk tampilan pada widget HTML saja, walaupun demikian jika anda berkeinginan untuk meletakkan kode-kode slider ini melalui template, maka silahkan dilakukan sesuai keinginan.

Mengapa saya memodifikasi slider carousel ini hanya untuk tampilan pada widget HTML tanpa harus edit template, hal tersebut bertujuan untuk memudahkan anda dalam melakukan editing kode dan penghapusan jika sewaktu-waktu anda tidak menginginkan tampilan slider ini. Berikut:

Cara Membuat Slider Carousel Terbaik Sepanjang Masa

1. Log in www.blogger.com
2. Masuk ke Tata Letak
3. Tambahkan Gadget
4. Pilih HTML/Javascript
5. Copy kode di bawah ini

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4QC3u0Knfloo2Jmcmk4w7YkcsznT_TUn13MAWS4I-lrRJIQtAnDAVon58_c24hL4YN-aIkgGA9w37E3R3-NPOCBm5uhQj6VCWy_K8EU_DREkPuR7yLHJ8DXIdvcsQM_aHUUPXXTi405I/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTTI0UkdTyOSdyho6DVKXU0ABecNKYsyjQC2WDUzH8FrGDCJ8-DQRb1QaVDFJLXCeeT8ia4NdMpmBQJnGRHED4rJ9dAy-1B2F8BpK7w1nXaXFcQqawRxSBjySnRWGU1dP1igiKdN_0Fs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3lPjAfdTurFfW2Z3mvyxZrh3-zW6CD8eRzVAkrTMiENX7G7p-wMAoWZl607D60VhTVLepLar0zJANyTErRI9uBUIbqyxpPagdGPwEDQM8exPvm1cKccKzVQTcN9zejdAmTk5J343ZvPg/h120/no-image.jpg",
pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuW4kN0RPfcInQAvD1CQXx6oRpf-1AOnYgTeNgwKsJY4Sdf-2_zx2QsERjvsTrLAe6sr4fLpQM_T1zRMlfSI_EvAu1BFpP1VM0l69bh1P15LxrysJPb42hqpxKHxiJqz8IVFBZrMqGEwA/h120/no-avatar.jpg",
numcomment = 5,
thumbcsize = 70,
cmsumm = 800;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default/-/label anda?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>

6. Paste kode di atas dan letakkan di kolom widget
7. Save dan lihat hasilnya

Keterangan

• .title-featured{text-align:center;position:none;margin-top:7px} (Ganti Position menjadi Relative bila tampilan title slider error).
• var numpostx = 15 (silahkan ganti sesuai keinginan)
• Silahkan edit sendiri kode css untuk memodifikasi warna, ukuran dal lainnya

Demikian artikel Cara Membuat Slider Carousel Terbaik Sepanjang Masa, semoga bermanfaat dan jika ada saran mohon dikonfirmasi. Terima Kasih!!.