Tutorial membuat image gallery slider carousel
Tutorial membuat image gallery slider carousel
Artikel Tutorial Blog, OKe kali ini saya akan memberitahu 1 lagi module yang wahhh hehehe knapa wah.. karena saya pertama kali melihat module ini pada blog film thehacker... dan saya iseng2 ambil source code nya trus cari di google... untuk lanjutannya deh.. oke ini dia cara2 memasang module ini..1. login dulu ke blogger anda
2. klik tata letak
3. klik edit html
4. klik "expand template widget"
5. Cari kode ]]></b:skin>.
6. Copy paste kode berikut persis di atas kode ]]></b:skin>.
.adscolumn{
width:933px;
padding:10px 3px;
background:#fff;
margin:5px 10px 0px 10px;
text-align:center;
border:1px solid #C0C0C0;
}
.adscolumn .widget{
}
7. Lihat ke bagian bawah, lalu cari kode berikut :
<div id='main-wrapper'>
8. Copy paste kode berikut persis di atas kode <div id='main-wrapper'>
<b:section class='adscolumn' id='adscolumn' preferred='yes'/>
9. Klik tombol SIMPAN TEMPLATE.
Ok..langkah diatas adalah langkah membuat elemen persis dibawah header, coba anda clik tata letak, lalu elemen halaman sudah adakah elemen halaman tersebut dibawah header yang nantinya jadi seperrti ini :
Ok sekarang lanjut,,sekarang kita mulai masuk untuk membuat step carousel, sekarang anda kembali ke edit html. cari kode ]]></b:skin> kemudian paste kode css berikut ini diatas kode ]]></b:skin>
.carousel{
float:left;
margin: 0;
padding:0px;
}
.carousel .widget {
width: 980px;
background:#c4d5ec;
margin: 0;
padding:0;
}
.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 940px;
height: 160px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 5px;
width: 140px;
}
.stepcarousel .panel img{
float: left;
background:#940f04;
margin: 5px;
padding:5px;
border:1px solid #ccc;
}
.stepcarousel .panel img:hover{
background:#ffffff;
}
berikutnya kita langsung masuk ke kode javascriptnya, sebelumnya tolong klik link dibawah untuk melihat seperti apa kode javascript yang akan kita pakai, lalu copy kode tersebut.
berikutnya kita langsung masuk ke kode javascriptnya, sebelumnya tolong klik link dibawah untuk melihat seperti apa kode javascript yang akan kita pakai, lalu copy kode tersebut.
jquery-1.2.6.pack.js (klik kanan, open link in new tab)
stepcarousel.js (klik kanan, open link in new tab)
nah, sudah lihat bagaimana kode javascriptnya..?, jangan dipikirkankan..!!!, copy ajah langsung lalu paste kode javascript tersebut diatas kode
nah selesai sudah penyisipan kode di page html, kalau anda belum yakin jangan langsung save tuh kode...lihat dulu kebenarannya dengan mengklik "pratinjau", setelah yakin tidak ada kesalahan, baru anda langsung save.
eits,,belum selesai sobat,,,sekarang kita langsung menuju tata letak, lalu elemen halaman dan klik tambah gatdet di kolom elemen halaman dibawah header yang baru saja kita tambahkan, nih saya kasih lihat lagi gambarnya :
# Tata letak
# Elemen halaman
# Tambah gatget
# Html/Javascript
# lalu masukkan kode berikut ini :
<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">
<!-- change the links with your own links -->
<div class="panel">
<a href="http://tutorialdansoftware.blogspot.com"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_581635038l.jpg"/></a>
</div>
</div>
</div>
# perhatikan kode berwarna hijau dan biru diatas, untuk yang berwarna biru ganti dengan link gambar anda..dan untuk gambar hijau ganti dengan link gambar yang menghubungkan gambar tersebut ke artikel yang anda tulis.
# catatan: kode seperti dibawah ini bisa anda tambahkan sesuai selera anda
<div class="panel">
<a href="http://tutorialdansoftware.blogspot.com"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_581635038l.jpg"/></a>
</div>
# (biasanya blog yang berisi kumpulan design, template, dan gallery gambar akan sangat membutuhkannya untuk menampung gambar mereka dalam satu gallery..seperti blogku ini..hehe)
# ok sudah selesai simpan hasil pekerjaan anda dan lihat blog anda ...
sebenarnya widget ini bisa disimpan dimanapun selain di bawah header..namun pada umumnya widget ini disimpan tepat dibawah header...
selamat mencoba..
Demikianlah Artikel Tutorial membuat image gallery slider carousel
Sekian review computer Tutorial membuat image gallery slider carousel, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan kali ini.
Anda sedang membaca artikel Tutorial membuat image gallery slider carousel dan artikel ini url permalinknya adalah https://review-computer.blogspot.com/2010/12/tutorial-membuat-image-gallery-slider.html Semoga artikel ini bisa bermanfaat.
Tutorial membuat image gallery slider carousel
Tag : Tutorial Blog,