Cara Membuat Slider Carousel Otomatis

Mau share pengalaman lagi ni, kali ini saya mencoba membagikan tutorial membuat Slider Carousel Otomatis di blog. Tutuorial ini saya dapat dari blognya maskolis.

Sebelumnya saya terangkan sedikit apa itu Slider Carousel, Slider Carousel ini adalah sebuah widget yang menampilkan keseluruhan postingan kita dan juga bisa untuk menampilkan berdasarkan kategori/label posting.

Untuk contoh lihat gambar dibawah atau kurang jelas bisa lihat demonya disini » http://ertigo.blogspot.com

Sekarang kita coba untuk menerapkannya di blog anda.

Pertama seperti biasa anda harus login dulu ke akun blogger anda. Kemudian masuk ke rancangan, pilih tab edit HTML, centang "Expand Template Widget" . Jangan lupa back up dulu blog anda.

Kedua, anda cari kode ]]></b:skin> letak kode dibawah ini tepat diatasnya:

#carousel{width:900px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#DCDCDC;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://lh6.googleusercontent.com/-R1MOXcl1Bsg/UAJavlN1WrI/AAAAAAAABF8/08zRYWeuoHo/s125/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://lh5.googleusercontent.com/--ueEqBmyHH8/UAJavmJkp6I/AAAAAAAABGA/5WT2POsO0nI/s125/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:192px;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:#696969}
#carousel a img{display:block;background:#fff;margin-top:0}

Untuk yang saya beri warna merah harus anda sesuaikan dengan lebar templat blog anda, agar nanti tampilan Slider Carousel ini tidak berantakan.

Oke, lanjut ke tahap berikutnya. Jangan simpan dulu templatenya. Sekarang anda cari kode </head> dan anda masukkan kode dibawah, kemudian letakkan diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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="90" height="80" 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>

Ket: Untuk warna merah, disana ada kode jQuery.min.js. Apabila template anda sudah terdapat kode tersebut, silahkan anda hapus kode yang berwarna merah. Karena akan lebih baik dalam sebuah template hanya terdapat satu kode jQuery.min.js. Sedangkan untuk warna hijau adalah jumlah slider yang akan ditampilkan, dan warna jingga untuk mengatur panjang/lebar gambar yang ada di dalam slider.

Masih belum selsai, masih ada tahap-tahap berikutnya. Panjang juga tutorialnya ne, saya aja sampai capek menulis dan berpikir kata-kata apa lagi ya, agar tulisannya menyambung dan mudah dimengerti..hehe..

Oke, lanjut...

Sekarang kita akan memasang kode pemanggil Slider Carousel yang telah kita buat tadi. Kode ini untuk diletakan di bawah menu, anda bisa juga meletakannya di bawah header, atau diatas footer. tergantung kreasi anda. Baiklah untuk memanggilnya anda harus mencari kode berikut (masih didalam edit HTML) cari kode ini <div id='main-wrapper'>, Letakkan kode dibawah tepat di atasnya:

<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>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,  
    visible: 4,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)  
</script> 

Ket: Yang berwarna ungu adalah untuk menampilkan jumlah posting di dalam slider.

Akhirnya selasai juga, sekarang anda boleh menyimpan templatenya. Selamat mencoba.

Oya, sedikit tambahan mengenai kode pemanggil Slidernya. Kode diatas saya fungsikan untuk semua halaman di blog, jadi Slider Carousel akan tampil di setiap page/halaman, dan posting.

Jika anda hanya ingin menampilkan di Homepage/Beranda, anda hanya menambahkan kode yang berwarna merah dibawah dan letakan sebelum dan sesudah kode diatas tadi:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
........
.......
})})(jQuery)   
</script>
</b:if>

Satu lagi, masih ada aja yang kurang...hehehe..dari pada nanggung berbagi pengalamannya lebih baik saya catumin aja di tulisan ini. Apabila anda ingin membuat Slider Carouselnya  hanya menampilkan berdasarkan kategori, anda hanya perlu merubah  yang berwana biru (lihat kode pemanggil Slider yang diatas tadi) ganti dengan kode di bawah ini:

&quot;&lt;script src=\&quot;/feeds/posts/default/-/Label Anda?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot

Yang berwarna merah sesuaikan dengan kategori/label mana yang akan anda tampilkan.
Kali ini baru benar-benar selesai, sekarang simpan templatenya dan gak bolak balik lagi dah..heheh...
Semoga bermanfaat...