Cara Pasang Iklan Banner Melayang Dengan Tombol Close

Jika di postingan artikel sebelumnya sudah dibahas cara memasang iklan banner melayang di sebelah kiri dan kanan blog tetapi tanpa dilengkapi dengan tombol CLOSE alias Penutup, maka pada postingan artikel ini akan dibahas cara memasang iklan banner melayang tersebut tetapi dengan disertai tombol CLOSE.

Tombol "CLOSE" ini perlu kita tambahkan untuk menyesuaikan dengan "Terms Of Services"/peraturan jaringan iklan online tertentu yang mensyaratkan blogger harus memberikan tombol CLOSE yang dapat ditutup jika memasang iklannya dengan menggunakan "script floating" atau script melayang ini.

Untuk memasang iklan banner melayang dengan memberikan tombol CLOSE sebenarnya cukup mudah. Silakan diikuti langkah-langkah berikut ini :
1. Setelah login ke Blogger, pilih Layout, kemudian tekan tombol "Add a Gadget" dan pilih "HTML/JavaScript"
2. Copy dan paste-kan kode HTML di bawah ini ke kolom isian "Content" :

<style type="text/css">
#gb{
position:fixed;
top:30px;
right:0px; z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:1px solid #0000FF;
background:#cfe2f3;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir-100;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
[CLOSE]
</a>
</div>

<center>

Masukkan kode HTML iklan Anda di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (20-gb.offsetWidth).toString() + "px";
</script></div></div>

4. Simpan dan lihat hasilnya.

Keterangan tambahan, kode yang diberi warna merah yakni nilai "px" bisa disesuaikan dengan tampilan blog Anda. Kode "float:" bisa diisi dengan "left", "center" atau "right" sesuai dengan posisi iklan melayang yang diingikan. Kemudian kode warna untuk "border" (garis pembatas) dan "background" (warna latar) juga bisa diganti dengan kode warna yang sesuai dengan warna blog Anda.

Semoga berhasil dan bermanfaat bagi blog Anda !