Tutorial Membuat Slider Carousel Automatik

Entri kali ni saya nak berkongsi satu lagi tutorial untuk blogger iaitu tutorial membuat slider carousel automatik. Slider ini akan  memaparkan entri secara rawak mengikut kategori label yang anda tetapkan. :)

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari (Search) kod dibawah:

]]></b:skin>

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>

/* slider carousel
----------------------------------------------- */
#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px;
margin-left: 56px;}
#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/AVvXsEglSZdA6ud7_-B12nRgmPxQSrGKqstQp5v5bK0rI2wzgDwO9-ebRqXvmkWQYjgTPWLtAibF3qf1-kc-HQ2jCGS45OaSaFrzuKVFvGO0YF7ZJZXupmM9AHw2E3Y2zLr6FxdKemwBaYqStTmJ/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/AVvXsEgRuM0NtaLtgupmOPo1nd0PVBqEdl7v_KgAXTrXOHPwHwxSCh75sr9Edgx7lB5Bc_2F34U3eUwtB84lQNBoGiOFbu8rC0aVj5-dCA6qam5xYE74rpMtJ7CvMfWHCm216Stzv7HL4swKNQnq/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}

Keterangan: 

• width:980px;height:125px; ~> Anda boleh mengubah lebar dan tinggi slider pada kod yang berwarna hijau .
• margin-left: 56px; ~> Set posisi Slider
• Jika anda mahir mengenai kod CSS , anda boleh mengubah kod diatas mengikut kreativiti anda.

7. Cari (Search) kod dibawah:

</head>

8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/faiztutorial/home/javascript/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKZP_Nh67jQRG5SxVilbehQRK02lTjK023DmC7bVTpEBxgezZIE9G91gBlR8FqfblP1fXickUvH0iuDwsgOOozXgjg21g81NWEG5Hfcpl3X4qmq8y2vVsmpK5BPuDue5RE9KraX4-sd0/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>

Keterangan:

• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> ~> Ini adalah script code bagi jquery.min.js . Jika script ini sudah sedia ada pada template anda, anda tidak perlu lagi letak pada template anda. Cukuplah satu script  jquery.min.js dalam satu template.
• numposts1 = 12; ~> Kod berwarna oren adalah jumlah slider yang akan dipaparkan.
• width="100" height="90" ~> kod yand berwarna biru adalah lebar dan tinggi gambar pada slider.

9.  Cari (Search) kod dibawah:

<div id='main-wrapper'>

10.   Paste (CTRL+V) kod dibawah sebelum kod <div id='main-wrapper'>

<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/-/label?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>

Keterangan:

•  /-/label  ~> Anda tukar nama label kepada nama label entri yang ingin dipaparkan pada slider.
• Jika anda ingin memaparkan entri-entri terbaru pada slider, anda padam kod  " /-/label " sahaja.

11. Klik Save Template