Cara Memasang Image Slider dengan jQuery

Slide Show Postingan itu apaan sih?

SlideShow, dari namanya sudah cukup jelas bukan? Itu lo yang gambar/foto nya berpindah-pindah sendiri. Saya banyak menjumpai blog sesama blogger itu menggunakan website slide show. Misalnya Slide.com, Kizoa.com atau Slideshow.com sendiri.

Situs-situs slideshow seperti diatas hanya cocok untuk memajang foto-foto/ gambar saja. Tapi bukan itu yang saya maksud pada postingan kali ini. Tapi slideshow postingan pilihan. Yang artinya slide show yang berisi image-image untuk menuju artikel-artikel pilihan yang kita tentukan sendiri.

Sebelum kita mencobanya disini saya akan memberikan cara pemasangan Slider ini, tepat diatas Sidebar.

Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-langkah berikut :

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. 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}

4. 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: &#39;mygallery&#39;,
 beltclass: &#39;belt&#39;,
 panelclass: &#39;panel&#39;,
 autostep: {enable:true, moveby:1, pause:3000},
 panelbehavior: {speed:500, wraparound:true, wrapbehavior:&#39;slide&#39;, persist:true},
 defaultbuttons: {enable: true, moveby: 1, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaygYRrPlp8VHV4j7lKep27XUd8WSlLCamoP1F0H-rdu10qzbza2F9JzYSzqSM6UCku7K_psB8F9jt1b44BfPAzH-YEsNFu4VnLDHTUNY-JIn3NEqQDQMe7A88j1EZmbD2Y3DxMQyaOsq0/s400/NLeft.png&#39;, -27, 80], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqUo7G3PoCSrq90Vb_6PjssMHEWalA0vN8Y-42pudhGLCxM3FxoLv4ykLfgGWtzQr4uyXU0pH8HIjyvVhutAKmlB8w_FKL7f3uyNZiSBmpVPou1aTPeA4DSwcgC2KdUULPsNtvU1bSZnSw/s400/NRight.png&#39;, -12, 80]},
 statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;],
 contenttype: [&#39;inline&#39;]
})

</script>

4. 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='http://www.uttafreak-987.co.cc/2011/04/uniqx-transparent-version-10-design-by.html'><img src='http://i52.tinypic.com/1z5p4xf.jpg'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/junoon-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjStYONCf4fLolEpLDgghw-CSXFF1T9lekyGALrjsR3AnN7KxsXWqRyPbvooc5U7NkXpSAMx4mb5RbPgUuBEPwW2YIgZ4wUzsVt0wGTLmqCuhgvmHtxn10hEFmaIxvalb2UvDNlxNyau_rN/'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/mdev-template-tampilan-klasik-sentuhan.html'><img src='http://1.bp.blogspot.com/-uDccDJ5KkPE/TabSvWyY86I/AAAAAAAABnk/xV28znia9CQ/s1600/Mdev.jpg'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/smart-shadow-template-blogger.html'><img src='http://lh5.ggpht.com/_dfnTVAxeWMI/Sy2ZHIP3tfI/AAAAAAAAC7A/uQgnydj_zNE/smart-shadow.gif'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/black-eleganisme-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtZv968irZQuw1PGhPoyVbDpxH1GtCzIVDUeH3Yq59sdnOa8ovRyFT0K_FrHj5XPjfVb1pxq3AVVINP-r6Ce7jJWLm99U89l30w1J0R56LIyebC5A_VC_00YpBGl8-Z9w-3_O8QZWojHQ/s400/Black+Eleganisme+Blogger+Template.png'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/03/koleksi-template-terbaru-2011.html'><img src='http://www.bloggertheme.net/wp-content/uploads/2011/02/yalene.jpg'/></a>
</div>

<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/css-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEgpEcXjNnptTA4EEw0TH7VoxNiu9vCI5FP8HcqSp1xa0ys3YralmwRhw-qGChrkrpqIR4bdnjvjcU-Qbxp91vpoQbhHrhTESbazXZWyxFs5_hcdpaqInRsNJvs3cB4NIXSX73Ztx0X8I/?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/AVvXsEhlWZ4aJ3Dx5kV0fTjHEFJChCHMISYzUREE6c4eNrAjfDTtdx1l8OaQU46BxYHl88P-Aa9suAWpL2_Zl5W5u-GG7p6i5mdDnyFqOKw5dnnT7eu5sXuoAnjXV2eGTDiWBeW9nO1h1UCGz1D8/s400/hovclose.png' data-select='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjcqesoeY8AX9kju9uq0m6_994w8P984eGiyw4IUifsactBVI1jQkP3-BsczHUh5z7heyx0DAezr9KoGh2GhdOw432f87fTMjjIIx_VIfNr6EiN7r5AJjfWGY09ncb48XFfGzk_2Hyokh/s400/close.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKGPAiifraa8e8FKUQ5-izh2tx0qotJpckbQURZQ5Sdk3dvGahu15zfGr4Jbzix6tr7OVT8PgfMoKAY49fwkHqOGdUpt-NvU-ktX0umrdpO5pOAHSCgexTAOIIyc7wp3e_YC7ZOKSulI7G/s400/open.png'/>
</p>
</div>

KET:::
- teks yang berwarna orange, URL Gambar anda.. sedangkan
- teks yang berwarna merah, URL gambar anda.

6. Terkhir Preview dulu,. jika berhasil. baru Save template..

Selamat Mencoba.

Share this history on :

Tweet

Title : Cara Memasang Image Slider dengan jQuery
URL : http://blogcunayz.blogspot.com/2011/07/cara-memasang-image-slider-dengan.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Memasang Image Slider dengan jQuery sebagai Sumbernya.