Cara membuat slider berdasarkan label

Slider ni adalah lain dari slider yang ada di blog lain kerana slider ini adalah disusun berdasarkan label.Slider ni sesuai diletakkan samada di bawah banner ataupun di footer,namun korang digalakkan memasangnya di bawah banner barulah sesuai dan nampak normal.Sebelum tu saya ingin beritahu awal-awal yang kodnya adalah banyak dan berat blog korang akan meningkat.
*sebelum saya memulakan tutorial,korang disarankan download template terlebih dahulu bagi tujuan backup jika berlaku error semasa mengedit Html.

Langkah 1
Pergi ke Dashboard > Template > Edit Html > Tick expand widget template

Langkah 2
Tekan ctrl + F untuk mengaktifkan fungsi find,kemudian cari kod ]]></b:skin>.Setelah jumpa kod tu,pastekan kod dibawah sebelum kod ]]></b:skin>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}

#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQyiBouMNK431oEi7_d6FadnPdMjTnoSKBDOspY2L16QQyL3yB_2HeYsFVi0ayvaITcINUhirKoubcx8yv0Jc2dHGVAvE9N8PGkuxYbyytamPmjylo_G-fpqhaLiDsxtjCu5ggiwaKLpk/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw-EEFWrlq4O-ykB6ZPf3yd3IymCxChovLRItvxLG2wFf13Kh8eItcMESLPKAXIpIbVaapznz2yi7JoKbiijtScKN3rTBIR4Me54zZM0KTzaA5hNvQRDecoS6IdiZS3FnFBoAPEtyzHls/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}

#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2OwPIyr23HaFDprsgqvD13kZ9cQ8bqB51-Kn2aCwcRkGof9UsXAfhEBUXjI8JjZNYCha72_6gyDqhbbpdYsvDKlO2KAdz3MloT8F-bBu-GqVhRP4PaGIoGLdAF0-YbX29ICLRFGol97w/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjngANP67b6dUXMtXIuHC__CFv4WcAf0LhGKXUTmbZayVrQj1bTBaofo87eOpNLfO17RPiEfPjj_AEKDCY5LnUHmxOwCj5CN4vhHUU7tJwOS6aBldOtV7kYN7PDL-qT0P03e81VN43UGYs/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}

#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3jcRrd6QPLWtSEMzAa6KDIFLqNxhJtUcj4USBrReLmxSODOgkmwkg3JfNVspG9zat1aE4Sji8kTCKUXXeITWVd3uTabQjlXg2goAZ60Q63C_lGHz-Pu1SYsyVqcxZGQbDxDmtyopKNxU/s1600/next.png) center}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Cf6ZsFT8tKbsCv1wRiMa0ruErUtXpX_1D8Px79Ohqd5gcM9BEqsKCtK48wIFamE_3mDOZl2GPixmCRU-0OETvH5l92oun9GTSU__1SVkhywjcOxsJRdPxBBWeFRrlUDZqDKkSZ_Atfc/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}

#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}

#carousel ul li a.slider_title:hover{color:#cd1713}

#carousel a img{display:block;background:#fff;margin-top:0}

*ubah angka 950 dan 185 yang berwarna oren mengikut ukuran yang sesuai untuk template korang.Angka tu ialah lebar dan tinggi slider yang dipasang.

Langkah 3
Tekan ctrl + F untuk mengaktifkan fungsi find,kemudian cari kod </head>.Setelah jumpa kod tu,pastekan 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='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX5Rc9Vafgp9zdu-zRzP1cTlwCmMWPKi1j8g4qYdrPYcFuMCETQn8pouSoWP1Hq9KZBXCWZJ57k6Z_QzTBTmfWN31VFtxdqudlKjK18tYjEZaZy5Iu4T5ongl4MZOTm-mlqXaElnSuWHU/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 140;

summaryTitle = 25;

numposts1 = 15;

label1 = "news";

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 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

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="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);

j++;

}

document.write('</ul>');

}

//]]>

</script>

 *Perhatikan kod 'numposts1 = 15;' dan 'label1 = "news";'
Angka 15 mewakili bilangan topik yang akan tampil di slider,manakala news mewakili label.
Tukar angka 15 dengan angka yang korang ingin tampilkan,manakala tukar news kepada label yang ingin korang tampilkan pada slider.Kecik/besar huruf pada label tu perlulah sama dengan label sebenar korang.

Langkah 4
Tekan ctrl + F untuk mengaktifkan fungsi find,kemudian cari kod <div id='main-wrapper'>.Setelah jumpa kod tu,pastekan 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/-/&quot;+label1+&quot;?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>

*Pastikan korang turuti satu persatu langkah yang diberikan, jika tidak ianya tidak akan muncul.
Cuba tekan preview,jika tiada error dan slider tu kelihatan.Savekan sahaja. Semoga berjaya:)