Cara buat Slideshow ringkas

Cara buat Slideshow ringkas untuk banyak kegunaan.Slideshow ringkas ini juga kita boleh gunakan untuk meletakan iklan di blog dalam format/bentuk 125x125.

Cara-cara untuk membuatnya juga ringkas.

Login ke akun blog anda

Masukkan script di bawah ini ke dalam GADGET HTML/Javascript.

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73cH3IhbaK1OU864sv1D7wbgtdztmKKLJ0TsP4JlA7JM9iYt-4-YZ57oVxHzTKmCZWeY-fR_psgwZdhpgfNz4ZbQh0b9xBGmMuImU8UCZKCZY5SAp4XLbVPtwcLhd4eedufviO9JeRYrX/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz6_kExt9UmELCSGtGMaMdt1XPY1VbcRiXFs-TiYqxeDiynKhZ041t7laZDCY0jIv2DKbvd8Xv56EMuH8wmt1ZsSVyoKhIfByjqXFkVSsILdiUoLDZ8WAs9Xo21obmcmKx1Tw7gn1KiV8Z/', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

Ganti yang berwarna merah mengikut kesesuaian blog Anda.
Dan SAVE GADGET

Cari code ]]></b:skin> dan gunakan Ctrl-F untuk memudahkan pencarian.

Salin code di bawah ini dan letak diatas ]]></b:skin>

.carousel {
float:left;
margin:0;
padding:0
}

.carousel .widget {
width:720px;
background:#888;
margin:0;
padding:0
}

.stepcarousel {
position:relative;
overflow:scroll;
width:765px;
height:160px
}

.stepcarousel .belt {
position:absolute;
left:0;
top:0
}

.stepcarousel .panel {
float:left;
overflow:hidden;
width:140px;
margin:5px 20px 5px 0
}

.stepcarousel .panel img {
float:left;
background:#940f04;
border:1px solid #000;
margin:5px;
padding:5px
}

.stepcarousel .panel img:hover {
background:#fff
}

#under_header {
opacity:100
}

.carousel h2,.quickedit {
display:none
}

Ganti yang berwarna merah mengikut kesesuan blog anda.

Copy code dibawah ini dan letak dibawah code ]]></b:skin> pula.

<script src='https://sites.google.com/site/listblogtutorial/widget/slideshow.js' type='text/javascript'/>

SAVE TEMPLATE, dan lihat hasilnya.

Selamat mencuba.