Cara Buat Iklan Close Di Tengah Blog

Hari ini aku akan bercerita perihal bagaimana cara memasang sebuah kotak iklan melayang sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. 

Float Top Bar ini biasanya berisi Content Iklan ataupun sebuah Form SubScribe. Menurut aku posisi ini yaitu posisi yang elok untuk memasangkan iklan advertiser alasannya yaitu niscaya pertama terlihat oleh pengunjung Website atau Blog kita.

Jika anda ingin memasangnya juga silahkan ikuti langkah-langkah pembuatannya :

1.  Login ke Blogger
2.  Masuk ke Tab Layout
3.  Pilih Elemen Halaman
4.  Tambah Gadget Pilih HTML / JAVASCRIPT
5.  Dan copy aba-aba di bawah ini kedalamnya

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
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;
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][Klik 2x]:.</a>
</div>
<center>
Masukan Kode iklan atau Gambar yang anda inginkan di sini
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

6.  Simpan

Untuk tulisan berwarna merah, sanggup anda ganti dengan aba-aba iklan, gambar ataupun goresan pena yang diinginkan, goresan pena berwarna biru adalah text bacaan pada tombol close. Sebenerna goresan pena berwarna biru adalah penjebakannya, alasannya yaitu iklan akan close hanya sekali klik saja, jadi apabila 2x klik otomatis iklan juga ke klik.

Update: 

• Tulisan berwarna kuning adalah jarak kotak iklan. Bisa anda tambahkan aba-aba right: ..px   atau left: ..px atau bottom: ..px (titik-titik sanggup anda ganti dengan angka)
• Tulisan berwarna ungu (z-index:+1000) yaitu posisi iklan. z-index:+1000 posisi iklan berada di atas, sanggup anda ganti menjadi y-index:+1000. 
• Kode berwarna hijau yaitu aba-aba warna garis pinggir kotak iklan (border).

Bagikan Artikel ini