Ahhh... Mulai menulis lagi...Ok, step carousel adalah...bla.bla.bla...semacam slide show gitu. Naah karena saya sedang tidak 'mood' buat nulis, jadi langsung saja. Untuk membuat Step Carousel Slide anda hanya tinggal membaca artikel ini dengan sangat teliti, kenapa saya bilang begitu ? Karena jika saya tidak berbicara demikian nantinya anda-anda semua tidak akan memberi komentar di blog saya yang biasa-biasa saja ini. Gak nyambung yaah..? kalo gak nyambung sambungin aja pake kabel RJ-45.
Step Carousel itu contohnya kaya gini :
Anda bisa menambahkan gambar dengan cara salin kode yang berwarna biru diatas. Dan menaruhnya sebelum tag
</div>
</div>
Step Carousel itu contohnya kaya gini :
Anda mau membuatnya, ikuti langkah langkah berikut ini :
- 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>
.carousel{
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}
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>
<script src='http://blogipank.fileave.com/gallery1.js' type='text/javascript'/>
<script src='http://blogipank.fileave.com/gallery2.js' type='text/javascript'/>- Simpan Template anda.
- Selanjutnya anda pergi ke Elemen Halaman.
- Klik Tambah Gadget dan pilih HTML/Javascript .
- COPAS code berikut :
<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: ['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>
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>
*Ganti Tulisan http://NAMA BLOG.blogspot.com/ dengan URL blog anda.
*Ganti Tulisan http://URL GAMBAR ANDA dengan URL gambar yang anda miliki. - Terakhir Simpan
- Selesai, anda tinggal melihat hasilnya. Untuk demo anda bisa melihatnya disini.
Posting Komentar