Membuat Slided-picture gallery

Halo kawan-kawan..hehe..kali ini blognyaipank mau bahas gimana cara buatwidget Slided-picture gallery. udah tau blom apa Slided-picture gallery?hehe.. ok, Slided-picture gallery adalah galeri foto yang bisa berjalan secara slide by slide..hehe..menurut saya..dengan widget ini bakal menambah cantik blog anda..gak percaya?hehehe..
ok nih sedikit previewnya sob :



gimana sob? bikin blog tambah menarik kan?hehe..masih blom puas ma contohnya?
hehe..ok,kalian bisa langsung test drive alias mencoba langsung..hehe..klik aja disini.

Gimana sob udah dicoba?hehe..O iya bro, ini widget lebarnya kira-kira 960 pixel..hehe..
ok,langsung aja sob gimana cara buatnya..hehe..

1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. kalian cari kode berikut :

]]></b:skin>

4. kalo udah ketemu, kalian ganti kode ]]></b:skin> dengan kode berikut :

.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}




]]></b:skin>

   (copy paste script/kode yang di download di sini, dikarenakan terlalu panjang. script bisa di download di bawah ini. jangan lupa hapus keterangan ini)

Download script disini.

hehehehehehe..panjang bangeet ya kode na?hehe..gpp yah..

5. Klik Simpan deh.

Buat nambahin ke widgetnya. langkah-langkahnya :

1. Menu Dashboard, klik Tata Letak, klik Elemen Halaman.
2. Klik Tambah Gadget. Klik HTML/Javascript.
3. Copy Paste kode 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="URL kalian"><img src="URL gambar" width="180 height="130"></a>
</div>




(Contoh)




<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>




</div>
</div>






Keterangan:




1. Setelah mengcopy paste, tulisan "(Contoh)" harap dihapus.
2. Apabila ingin menambahkan gambar baru, copy paste semua kode diatas yang berwarna hijau.
3. Kode diatas yang berwarna ungu jangan dihapus. setiap menambah gambar, letakan kode warna hijau (sesuai keterangan no 2) diantara kode berwarna ungu.




Contoh untuk menambahkan gambar baru :






<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://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>

(Contoh)


<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>

<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>

<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>

<div class="panel">
<a href="http://blognyaipank.blogspot.com/"><img src="http://i39.tinypic.com/2vl7f61.png" width="180 height="130"></a>
</div>


</div>
</div>






Lihat Contoh diatas untuk menambahkan gambar baru diatas, kode berwarna hijau bertambah.

4. Klik Simpan.

Gimana???? Agak rumit yah?Ya begitulah caranya..O iya, ada juga lo yang slidenya otomatis + templatenya juga..jadi uda sepaket gitu..hehe..kalo mau liat,klik aja disini..

Semoga bermanfaat yah..Semoga blog kalian menjadi semakin menarik!