Membuat Slide Iklan atau Slide Foto pada Blog

Selamat Malam agan..agan..saya mau posting nih mengenai Adsense, anda sudah pada tau kan apa itu google adsense?? Ya..!! Google AdSense adalah cara yang cepat dan mudah bagi semua golongan penayang situs web untuk memperoleh uang dengan menampilkan iklan Google yang bertarget dan tidak mengganggu di situs web mereka.

Disini Anda dapat menampilkan beberapa jenis iklan dalam bentuk slide yang akan bergerak. Iklan akan ditampilkan bergantian dan akan berhenti ketika cursor mouse berada tepat diatas iklan tersebut. Trik ini sedikit rumit buat blogger yang masih newbie. Berikut ini saya akan berikan langkah-langkah cara membuat slide iklan tersebut:

1. Login ke blogger
2. Masuk ke Rancangn -- Edit HTML
3. Jangan lupa untuk memback up template sobat
4. Centang Expand Widget Template
5. Cari kode ini ]]></b:skin>
6. Letakan kode dibawah ini diatas kode ]]></b:skin>

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

.carousel .widget {
width: 720px;
background:#c4d5ec;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 765px;
height: 160px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 5px 20px 5px 0px;
width: 140px;
}

.stepcarousel .panel img{
float: left;
background:#940f04;
margin: 5px;
padding:5px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#ffffff;
}
.quickedit{display:none}

#under_header{
opacity: 100;

}

Keterangan:
- Kode berwarna biru diatas adalah ukuran slide iklan atau carousel. Soabt dapat sesuaikan dengan lebar sidebar apabila ditempatkan pada area tersebut.

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

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/slide_gallery1.js' type='text/javascript'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/slide_gallery2.js' type='text/javascript'/>

8. Simpan template sobat

Selanjutnya kita akan menambahkan widget slide gallery tersebut pada elemen halaman atau pada pada sidebar blog sobat

1. Masuk ke Rancangan -- Elemen Laman
2. Tambah gadjetkan lalu pilih HTML/Javascript
3. Masukan kode dibawah ini pada gadjet tersebut

<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: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9rfVNPakJevm7CJbc1F51-r4d2dDYcKZ8P1GTFkuSMFcEc1cb6X8BJYmffs22Oh-uwMuFSgvxXwNVWBFHZRyQ5O-JS_fAAdxmnIWiG5901Qz-QghJ5NuphXV1bYy438VOuZFVNW6y-nd/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmS3LRgMHSwbh87W33npGdaLMhbjF3vD0sLMxgGE_egQHwh9Azub0fskFYycgp-UsZaCoxEbRoVf6hErhlFrNR1W3x27oRqx1va4CWb2wXK8uRS4F__ZRyiQSUaVPP4BdaW4n8vps9f_Eh/', -55, 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 LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>