Cara Memasang Image Slider dengan jQuery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode : ]]></b:skin>
7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

#slideM{margin:0 0 15px; overflow:hidden}
.stepcarousel{border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; position:relative; border:1px solid white; overflow:scroll; width:270px; height:200px}
.stepcarousel .belt{position:absolute; left:0; top:0}
.stepcarousel .panel{float:left; overflow:hidden; margin:10px; width:175px; height:160px}
.panel img{width:175px;height:160px}

8. Selanjutnya Cari kode : </head> .
Lalu letakkan Kode berikut sebelum atau diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/last.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Nav%20Mdev.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Gambar%20Bergantian.js' type='text/javascript'/>
<script type='text/javascript'>
summary_noimg = 500;
summary_img = 300;
img_thumb_height = 130;
img_thumb_width = 110;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
        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);
            }
        }
        strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
}

function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0 10px 0 00;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
   }

   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
}

//]]>
</script>

<script type='text/javascript'>

stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt',
panelclass: 'panel',
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJk64JZKv6BrNk1gH4FrChWb4gQWyKWjulN2yaAR2qFe8wc-ZSqf6WGxaELOjzgS1vAShq1HbRo4Hu0m84lALSjYwWeC1rdvMyLGUl6ThbDrmWJRC9x5C30GvFjVhZMbdM19NRau7xMPDI/s400/NLeft.png', -27, 80], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV4T2YNh92NflHgjRS7P3eb6Rl1BmivGbi-GKWIfcvDvGFwCvpYVl8XLOC-NkJuJ_cQP-nysu9qRuKF_62uOUEXzWlBCc3tTRudhh4wDhYqXRfWyiTJCK00hZ9Rq2XSmoiZyEjRAkZEvt_/s400/NRight.png', -12, 80]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline']
})

</script>

9. Dan selanjutnya cari kode : <b:section class='sidebaratas' id='sidebaratas' preferred='yes'>
Lalu letakkan Kode berikut diatasnya.

<div id='slideM'>
<div class='stepcarousel' id='mygallery' style='width:80%;height:180px;margin:0 auto;'>
<div class='belt'>
<div class='panel'>
<a href='##'><img src='http://i52.tinypic.com/1z5p4xf.jpg'/></a>
</div>

<div class='panel'>
<a href='##'><img src='http://lh6.ggpht.com/_1RC6aqxCk8A/TMBmUhhLsJI/AAAAAAAAAXg/DZyQwTGWIR0/image%5B6%5D.png'/></a>
</div>

<div class='panel'>
<a href='##'><img src='http://1.bp.blogspot.com/-uDccDJ5KkPE/TabSvWyY86I/AAAAAAAABnk/xV28znia9CQ/s1600/Mdev.jpg'/></a>
</div>

<div class='panel'>
<a href='##'><img src='http://lh5.ggpht.com/_dfnTVAxeWMI/Sy2ZHIP3tfI/AAAAAAAAC7A/uQgnydj_zNE/smart-shadow.gif'/></a>
</div>

<div class='panel'>
<a href='##'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlLmU81e0YYumOCeFEuiXfbjWGEhrdT9suuRyWO82YESIQzmxI_4yxkBbGghYc53Q5tIXsJYBfVUF-pb2CfntBxdXG-4g1k0lFQC5KSWvYms1B-hnIZ3ALD5-sJjbnEdBJbLX1tMyJEeg/s400/Black+Eleganisme+Blogger+Template.png'/></a>
</div>

<div class='panel'>
<a href='##'><img src='http://www.bloggertheme.net/wp-content/uploads/2011/02/yalene.jpg'/></a>
</div>

<div class='panel'>
<a href='##'><img src='http://lh4.ggpht.com/_f7ChQS4URE4/TJkDxRlNqQI/AAAAAAAABF4/JW1hdZwyk-c/preview%5B7%5D.png?imgmax=800'/></a>
</div>

</div>
</div>
<p id='mygallery-paginate' style='text-align:center'>
<img data-moveby='1' data-over='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqKm5KGO1tpJe8PlYyqQV9r4dUmI0RsuDi8jxkNJF0ffUQiZIcpWChjQaiFe3KGUndbJUQHIzE_MFbbuER5LfxsCxJBrCBybia3UaNXukKM2DMmlaGN5sAh2QFzzaxY-wEQw5rGFRgYLfZ/s400/hovclose.png' data-select='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUcW4VDKVNPxviEe0xfqPuzZ78yV2JRtUShybcShfV3lJFRCytZQFpsBk515cK6NoBheI_r0SbIRJXyoRfWjIkbIn7Q7bv4F5yybexQpIylZS3qF-VIPWXoj0S9yVZaRcNlhIj1YXD-ffQ/s400/close.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsGNBIPKl6SGPbQMOpL6JicPShFFAJFjTLeSt5VqDMzBAgf1YMJ13TRAymWCZd3teKJpAHpV4zxVaZu5IowS36jxg1HagssAZMFQIRYsVeArS3i5PHjbs3YY6Y9f-m0hAeXEYnU9qlSAzf/s400/open.png'/>
</p>
</div>

NB:
► teks yang berwarna orange, URL blog anda.. sedangkan
► teks yang berwarna merah, URL gambar anda.

10. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's