> Update >>
Home » » Cara buat Slideshow ringkas

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.

2 comments:

Unknown said...

ganti warna latarnya gimana yaa ? kalau bisa transparan :D makasih

Unknown said...

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Post a Comment

 
list blog tutorial
Ambil banner

Template

More on this category »
Submit ExpressSEO Tools My Ping in TotalPing.com

tutorial

© All Rights Reserved | Best View With Google Chrome