Cyber Drops

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 :

Nah yang dilingkari brush hitam itulah yang disebut elemen percis dibawah header..(maaf lingkarannya pletat pletot..hehe)
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.


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


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