Membuat Slide Iklan atau Slide Foto

Pengen punya slide iklan atau slide foto seperti blog ini. Anda dapat menampilkan berbagai jenis iklan dan menampilkannya seperti slide. Gambar akan ditanpilkan bergantian dan akan berhenti berganti ketika cursor berada tepat diatas iklan tersebut. Nah gimana trik yang satu ini menarik bukan???. Kalo udah gak sabaran langsung aja dibuat...
1. Login ke blogger
2. Klik tata letak
3. Klik edit HTML
4. Centangin Expand Widget Template
5. Cari kode ini ]]></b:skin>

6. Letakan kode ini diatas kode ]]></b:skin>

.carousel{
float:left;
margin: 0;
padding:0;
}

.carousel .widget {
width: 305px;
background:#FFFFFF;
margin: 0;
padding:10;
}

.carousel h2{
display:none;
}


.stepcarousel{
position: relative;
overflow: scroll;
width: 304px;
height: 140px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 1px;
width: 150px;
}
.stepcarousel .panel img{
float: left;
background:#FFFFF;
margin: 10px;
padding:0px;
border:0px solid #ccc;
}
.stepcarousel .panel img:hover{
background:#FFFFF;
}

.quickedit{display:none}

7. Letakan kode dibawah ini dibawah kode ]]></b:skin>

<script src='http://blogipank.fileave.com/gallery1.js' type='text/javascript'/>
<script src='http://blogipank.fileave.com/gallery2.js' type='text/javascript'/>

8. Simpan template anda.

Selanjutnya nambah widget anda pada elemen halaman

1. Masuk ke elemen halaman, klik tambah gadjet dan klik edit HTML
2. Masukan kode ini pada elemen halaman anda:

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

<div class="panel">
<a href="url anda disini"><img width="125" src="url gambar anda disini" height="125"/></a>
</div>

<div class="panel">
<a href="url anda disini"><img width="125" src="url gambar anda disini" height="125"/></a>
</div>

</div>
</div>

3. Ganti tulisan berwarna merah didalam kode dengan url anda dan ganti tulisan warna biru dengan url gambar anda.
4. Simpan gadjet anda dan lihat hasilnya.....Selamat mencoba!!!

Posted in: Adsense,Animasi,Gambar