Cara Membuat Content Slider Carousel Otomatis

Content slider carousel otomatis yang saya lihat dari blog nya maskolis.com ada dua macam, yang pertama adalah content slider carousel dengan image dan judul artikel ada dibagian bawah gambar, sedangkan yang kedua adalah content slider carousel dengan judul artikel ada disamping gambar seperti yang anda lihat di home page blog saya, atau seperti gambar diatas.

Artikel ini memang sumbernya dari maskolis.com, saya membuat artikel ini tujuan utamanya adalah untuk dokumentasi saja, agar suatu saat nanti kalau ingin memasang pada blog saya yang lain gampang mencarinya. Terima kasih buat maskolis yang sudah bersedia berbagi ilmunya.

Berikut panduan cara membuat content slider carousel otomatis versi 2 (dengan judul artikel disamping gambar)

1. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, cari kode: ]]></b:skin>, kemudian masukkan kode berikut ini diatasnya.

#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px} #carousel h5{color:#555;margin:2px} #carousel .container{position:absolute;left:24px;width:960px;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/AVvXsEjtxdaoqzndVLbh1GCVXmlI3eE51RUS5-2wXce9e-wRcC8-BWBMbv4DB_huYZh7Uk3bRRrS0hbFqS1FIQssMXK5HmcKEZli7-jCV-oPQvY-nTA1lyijTcfm4qb_0VuQs3dH5CRnnmAXru92/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/AVvXsEhqY_miMSRu4zEPP5MQdGKcnBxxq55V1oD5lXjt2bfkQSEKI2kfy3lRQgrNkzenxEVx3jVad4ZxBhPiR_quVFOgppoybmrfassyOhFmCxP0lZLHIjrMWG68MKTiSQyUtm-QOXbRYTreoCxE/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:212px;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} #carousel ul li a.slider_title:hover{color:#1b5d97} #carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode: width:980px;height:125px diatas, itu adalah lebar dan tinggi slider pada blog yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

2. Langkah selanjutnya masih pada posisi Edit HTML, cari kode: </head>,  kemudian masukkan kode berikut ini diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglM39mmiPHf1redg3wTDvAD3_EAjdb-0ikfv9tmLUML2AAiVbX1Ao2sNz05aKyqmbwVWS9uz3lg5lbAiyvO_PbTWZrGUipoW4-QuBvxmzB0Qe6jOHWrBbEWWqMbcJLHykBf5xql-VGIZY/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 12; 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; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; 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>'); } //]]></script>

Perhatikan URL script: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode tersebut diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Kode: numposts1 = 12; diatas adalah jumlah slider yang ditampilkan. Sedangkan kode: img width="100" height="90" adalah panjang dan lebar image yang ada di slider.

3. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode: <div id='main-wrapper'> atau yang mirip dengan kode itu, kemudian letakkan kode berikut ini diatasnya.

<div id='carousel'><div id='previous_button'/><div class='container'><script>document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script> <div class='clear'/></div><div id='next_button'/></div><script type='text/javascript'>(function($) { $(document).ready(function(){ $("#carousel .container").jCarouselLite({ auto:4000, scroll: 1, speed: 800, visible: 5, start: 0, circular: true, btnPrev: "#previous_button", btnNext: "#next_button" }); })})(jQuery) </script>

Perhatikan kode: script src=\"/feeds/posts/default/-/sport?max-results diatas, sport adalah label yang ditampilkan pada slider nantinya (ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.

4. Langkah terakhir, save templates dan lihat hasilnya.

Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.