Membuat Iklan Pojok Dengan / Tanpa Tombol Close ( Klik Satu Kali )

Membuat Iklan Pojok Dengan / Tanpa Tombol Close ( Klik Satu Kali ): Bila anda menginginkan iklan berada dipojok saja tanpa menyediakan tombol close kepada pembaca maka cukup dengan mengunakan trick css saja tapi jika iklan pojok tersebut harus dengan tombol close maka memerlukan scrip jquery atau javascript, nah berikut bagiamana kedua script iklan floating dengan dan tanpa tombol tutup klik satu kali bisa dicapai dengan sempurna :

Iklan pojok tanpa tombol close ( Menggunakan CSS )
1. Tambahkan kode berikut pada baris css template blog / website anda

#pojok {width:160px;position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); opacity:0.9;}

2. letakkan Script iklan anda dengan format kode berikut sebelum </body> :
<div id='pojok'> Script iklan anda disini</div>

Catatan untuk kode yang dipertebal :
Top:0px; - ini adalah jarak dari atas sekaligus memberikan perintah kepada browser untuk memulai elemen dari atas halaman
left:0px; - memerintahkan browser untuk menampilkan elemen pojok disebelah kiri berjarak 0 pixel, Ganti dengan right jika ingin iklan pojok berada disebelah kanan.
opacity:0.9; - ini adalah ketebalan background / transparansi warna, coba ubah dengan angka angka yang lain untuk lebih memahaminya.

Cara membuat Iklan Pojok dengan Tombol Close / Klik satu kali
Sebenarnya cara membuat iklan pojok dengan tombol close klik satu kali berikut hanya menggabungkan kode kode diatas dengan script jquery, yuk kita mulai :
1. sisipkan script jquery berikut sebelum kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
2. Tempatkan iklan anda dengan format berikut sebelum kode </body>

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(1000);
});
});
</script>
<style type='text/css'>
div#btm_banner {width:155px;position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); opacity:0.9}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'/>
<div align='center' id='btm_banner' style='background:#fff;z-index: 9999;'>
<div style='text-align: right; width:156px; height: 3px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnYlwnaC_Gw__hmcZIS1_poYiDJBOG1rAOohD_XvtHN5PkUcmXogNT1Y14KZCB-dbkRCIsjNZoht4ncyNF6EQF16uAWQ3g8lup0Hv9la2mxHYZsseduD6SMAAH5D902oyEeRzDC_YdZjh/s1600/close3.png'/></div>
<div style='clear: both;'/>
<p>
<p><center>
Script Iklan Anda dengan Ukuran lebar maksimal 160px disini
</center></p><small><a href='http://sumbercara.blogspot.com/'></a></small>
</p>
</div>


Keterangan dari yang dipertebal :
Beberapa pengaturan yang lain sama dengan kode yang ada pada iklan pojok tanpa tombol close ditambah : .hide(1000); - angka seribu adalah cepat atau lambatnya bagian menghilang ketika tombol close diklik, silahkan ganti dengan angka lainya yang lebih besar atau lebih kecil agar lebih memahami.

Note : Cara floating iklan dengan tombol close berikut menggunakan jquery, silahkan tanyakan kepada penyedia iklan PPC yang anda gunakan untuk lebih memahami TOS yang telah mereka aturkan kepada setiap pulisher.

Catatan Lainnya :
1. Membuat Iklan Floating Dengan Tombol Close Di Footer Blog
2. Floating or aligning Center Adsense unit using css
3. Creating Static Footer / header With CSS - Div That Stay At The Bottom / Top of Page

Membuat Iklan Pojok Dengan / Tanpa Tombol Close ( Klik Satu Kali )

Topik Paling Populer