Membuat SLide Gallery foto

Assalamu'alaikum Wr. Wb.


Gimana kabarnya kali ini sobat? Semoga baik-baik saja. Kali ini Saya akan membagikan trik ataupun cara, yaitu cara membuat slide gallery foto. Trik/Cara ini saya dapat dari blognyakangipank. Slide gallery foto ini adalah kumpulan dari beberapa foto atau gambar yang bisa bergerak dan biasa dipasang diblog. Slide gallery foto ini juga bisa digunakan untuk mempercantik blog sobat. Karenan mata pengunjung bisa dimanjakan dengan gambar-gambar yang bergerak. Gimana sobat, sudah pada tahu kan apa itu Slide gallery? Kalau sudah pada faham langsung saja kita mulai cara membuatnya.


1. MenuRancangan/Tata Letak---> Edit HTML.


2. Centang kotak kecil disamping tulisan Expand Widget Template.


3. Cari code berikut ]]></b:skin> ganti code tersebut 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>


4. Simpan


Nah untuk menambahkan gambarnya ke widget, berikut langkah-langkahnya:


1. Rancangan/Tata Letak--> Element Halaman-->klik Tambah Gadget--> pilih JavaScribt/HTML


2. Copy paste code 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">


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



</div>
</div>






Keterangan:


1. Setelah dicopy paste hapus tulisan (contoh)


2. Apabila ingin menambahkan gambar baru, copy paste semua kode diatas yang berwarna hijau
3. Kode yang berwarna ungu jangan dihapus. Setiap akan menambahkan gambar baru letakkan kode yang berwarna hijau (sesuai keterangan nomor 2) diantara kode yang berwarna ungu.


4. Klik Simpan


Selesai deh... Gimana mudah kan? Walaupun caranya agak panjang...