Hari ini saya akan bercerita tentang 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 saya posisi ini adalah posisi yang bagus untuk memasangkan iklan advertiser karena pasti 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 kode di bawah ini kedalamnya
2. Masuk ke Tab Layout
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Dan copy kode 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>
Script from maskolis.com
6. Simpan
Untuk tulisan berwarna merah, bisa anda ganti dengan kode iklan, gambar ataupun tulisan yang diinginkan, tulisan berwarna biru adalah text bacaan pada tombol close. Sebenerna tulisan berwarna biru adalah penjebakannya, karena iklan akan close hanya sekali klik saja, jadi apabila 2x klik otomatis iklan juga ke klik.
Update:
Update:
- Tulisan berwarna kuning adalah jarak kotak iklan. Bisa anda tambahkan kode right: ..px atau left: ..px atau bottom: ..px (titik-titik dapat anda ganti dengan angka)
- Tulisan berwarna ungu (z-index:+1000) adalah posisi iklan. z-index:+1000 posisi iklan berada di atas, dapat anda ganti menjadi y-index:+1000.
- Kode berwarna hijau adalah kode warna garis pinggir kotak iklan (border). Anda dapat melihat kode warna DISINI
Last Words
Sekian post tentang cara membuat iklan melayang dengan tombol close. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)
AD-BLOCKER DETECTED!
