Inspired my wife

Jumat, 10 Februari 2012

Cara Membuat Iklan Melayang Menggunakan Java Script

Setelah sebelumnya kita bahas tentang cara menampilkan iklan popup, kali ini kita akan coba membuat iklan melayang dengan tombol close menggunakan java script. Iklan melayang merupakan iklan yang akan selalu tampil dihalaman depan web/blog. Jadi iklan melayang ini berbeda dengan iklan popup. Untuk contoh iklan melayang bisa Anda lihat di beberapa situs besar seperti detik.com, vivanews.com atau di kompas.com.
<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 onclick="showHideGB()"> </div>
<div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan kode iklan, banner, gambar atau tulisan 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>

Cara pasang iklan melayang di blogspot
  • Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
  • Masuk ke Tab Tata Letak
  • Pilih Elemen Halaman
  • Tambah Gadget Pilih HTML / JAVASCRIPT
  • Silahkan copy dan paste code script diatas
Cara pasang iklan melayang di wordpress
  • Untuk memasang iklan melayang ini hanya bisa dilakukan di wordpress berbayar, sementara untuk wordpress gratisan (wordpress.com) tidak bisa.
  • Login ke account wordpress
  • Pilih Appereance -> Widgets -> Text
  • Silahkan copy dan paste code script diatas

0 komentar:

Posting Komentar