Membuat Gallery Image Step carousel

Fuuuuiiiihhh akhirnya kesampain juga bikin gallery image pakai carousel. setelah sekian lama mencari-cari kesana kemari baru hari ini ketemu (27/10/09). hehheehehe bwt temen2 yg mo coba bikin carousel silahkan ikuti aja step2 nya..............



berikut scriptnya :
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 :

&lt;div id='main-wrapper'&gt;<br>

8. Copy paste kode berikut persis di atas kode &lt;div id='main-wrapper'&gt;<br>

<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 seperti ini :

Ok sekarang lanjut,,sekarang kita mulai masuk untuk membuat step carousel, sekarang anda kembali ke edit html. cari kode ]]&gt;&lt;/b:skin&gt;

 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

javacarousel 

nah, sudah lihat bagaimana kode javascriptnya..?, jangan dipikirkankan..!!!, copy ajah langsung lalu paste kode javascript tersebut diatas kode &lt;/head&gt;

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, gambar seperti yg diatas.

gimana..sudah jelas kan,,? nah lalu pilih html/javascript, kronologisnya gini nih..

Tata letak

Elemen halaman

Tambah gatget

Html/Javascript

lalu masukkan kode berikut ini :

 HTMLcarousel 

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  

&lt;div class="panel"&gt;<br>
&lt;a href="<span style="color: lime;">http://fajardesign.blogspot.com/

2009/01/perempuan-solo.htmlspan>"&gt;&lt;img border="1" src="<span 

style="color: blue;">http://photos-318.friendster.com/e1/photos/81/33/27313318/

1_556499958l.jpgspan>"/&gt;&lt;/a&gt;<br>

</div>

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