MEMBUAT SLIDER CAROUSEL OTOMATIS WARNA BIRU

Masih seputar mengeksploitasi artikel-artikel blog yang kita miliki, slider Carousel Otomatis ini akan menampilkan artikel-artikel terbaru yang kita posting dalam bentuk slide dengan menampilkan thumbnail postingan, judul postingan berikut time-stamp di atasnya. Warna biru langit mendominasi slider ini, artinya warna biru langit ini menjadi background dari widget ini. Dengan demikian diharapkan dapat menarik minat visitor blog atau pengunjung blog untuk memperhatikannya.

Slider Carousel ini secara otomatis akan menampilan postingan-postingan kita yang terbaru tanpa kita harus melakukan setting label atau kategori, jadi slider ini menampilkan postingan-postingan secara random (acak). Slider ini pertama kali di buat oleh sahabat blogger kita Mas Kolis dengan alamat url web-nya di : http://www.maskolis.com/2012/07/membuat-slider-carousel-otomatis-versi.html. Slider Carousel ini memang cantik dan pantas untuk pasang pada blog yang kita miliki, semata-mata untuk mempercantik penampilan blog.

Tanpa banyak bicara, beginilah cara membuatnya  :

1. Pertama Anda mesti login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah-langkah di atas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

Kode Script:

#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/AVvXsEiiF4jKSGbHWUdH0da_78gYc1ORvn6lz2k8-kE8eJmW5IAoxVHg1fcoX38nsGIwn40q5jJxMOL0aEwPUow3hLh8Oe_2jdy6eK_odmVccmw3Cud4NzurRrZ6sQBTIwBkgInvR15P5ea9Ixhr/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/AVvXsEhBozw9uOvNKBOAU_BWEOMwsSr3Ezea_hp7_mVwOGI9qmjNFmt4ndKA06UMjIR_GReekvjTKeoHUpAqQauWhKTc5W-OwDn_LARZkiWB9w6LvlhbWvcErTWHMfvh4IIcsGN3k2CUlzUpSRwB/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 warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

6. Langkah selanjutnya adalah sebagai berikut,  masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

Kode Script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIY99eblV2wespXxLaEVc8x9H1pO0QUmlWTD_rW4mIEXs48DTYbnXuOOqjcTGn8AqzhpgzKajIBKjVlYud26D42aWrF5R9L_1gQI_w1g9Ob8XRKLZ6eTDymW7eBUlNjn5exF635ujFaMc/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>

Anda dapat juga menggunakan text javascript yang telah saya sederhanakan dengan kode berikut  :

<script type="text/javascript" src="http://yourjavascript.com/46151833816/carouselku.js"></script>

Keterangan :

Perhatikan URL script warna merah 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 warna merah 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 warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.

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

Kode Script:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/sport?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: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if>

7. Perhatikan kode warna merah 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. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Demikian tadi tutorial membuat slider Carousel Otomatis warna biru ini, seperti biasa jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

Update :
Untuk dapat berhasil memasang widget Carousel Otomatis ini dengan sempurna, ada beberapa hal yang harus anda perhatikan secara mendalam, pertama adalah ukuran template anda (main-wrapper) haruslah 980px, supaya anda tidak melakukan penyesuaian-penyesuaian yang cukup rumit. Kedua, pada kode script yang diletakkan di bawah <div id='main-wrapper'> untuk bagian visible yang tertulis dengan angka 5, harus anda ganti dengan angka 4.