Step Carousel itu contohnya kaya gini :
- Pertama, pergi ke Dashboard, Pilih Tata Letak
- Pergi ke Edit HTML
- Klik checkbutton Expand Widget Template
- Cari tag ini ]]></b:skin>
- Jika sudah ditemukan copy code di bawah ini dan taruh diatas tag ]]></b:skin>
float:left;
margin: 0;
padding:0px;
}
.carousel .widget {
width: 920px;
background:#c4d5ec;
margin: 0;
padding:0;
}
.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 910px;
height: 173px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px;
width: 200px;
}
.stepcarousel .panel img{
float: left;
background:#d9e5f4;
margin: 0px;
padding:10px;
border:1px solid #ccc;
}
.stepcarousel .panel img:hover{
background:#b5c5d8;
}
.quickedit{display:none}
- Kemudian copy juga code di bawah ini di bawah tag ]]></b:skin>
- Simpan Template anda.
- Selanjutnya anda pergi ke Elemen Halaman.
- Klik Tambah Gadget dan pilih HTML/Javascript .
- COPAS code berikut :
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: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.png', -65, 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">
<!-- Ganti link dengan link kalian -->
<div class="panel">
<a href="http://NAMA BLOG.blogspot.com/"><img src="http://URL GAMBAR ANDA" width="180 height="130"></a>
</div>
</div>
</div>
Anda bisa menambahkan gambar dengan cara salin kode yang berwarna biru diatas. Dan menaruhnya sebelum tag
</div>
</div>
- Terakhir Simpan
- Selesai, anda tinggal melihat hasilnya. Untuk demo anda bisa melihatnya disini.
10 komentar:
keren keren
bagus to.... sayangnya ku g bsa html ksh di postyngan gmana ya
Wah mantep sob tutornya...!!!
makasih tipsnya sobt......
salam kompak selalu...
mksh infonya sob
mantap tu scriptnya, tapi kayaknya bisa bikin berat blog ya.....
Tutorial Blog | Iklan Baris
ini yang aku cari makasih banget sob
mantap nih gan
wah udah lama ni...dicari2 akhirnya dapat juga thx ya telah buat artikel
mantap slidernya
Posting Komentar
silakan berikan kritik maupun saran anda di bawah ini
terima kasih telah berkunjung di blog saya