Cara Membuat Slide Picture

Hai sobat blognya herry. Gimana kabarnya..tentu dalam keadaan baik kan. Sobat blognya herry, Kali ini blognya herry memposting tentang cara membuat slide picture seperti yang ada pada blog ini.

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!