Membuat Iklan Melayang di Blog

Iklan Melayang dan Kelebihannya

Banyak orang ingin membuat tampilan iklan di blog menjadi menarik dengan menambahkan beberapa trick tertentu pada iklan tersebut. Salah satunya adalah membuat iklan melayang di blog. Trick ini dibuat untuk meningkatkan klik pengunjung dengan bagian iklan bisa mengambil fokus pengunjung. Disamping itu kotak atau pembungkus iklan melayang ini dilengkapi dengan tombol close yang dapat di klik dua kali, sehingga intensi klik akan lebih sering kepada iklan tersebut. Sapa tau aja salah klik atau dengan senang hati sengaja klik iklannya...heee. Kotak iklan melayang ini juga dilengkapi dengan pergerakan dari atas ke bawah dan dari bawah ke atas secara bagus, Lebih penting lagi trick ini tidak membaratkan loading blog. sehingga akan menambah daya tarik tampilannya tersebut. Sekarang mari kita bahas cara membuat iklan melayang di blog. Ikuti langkah berikut.

iklan melayang di blog

Cara membuat iklan melayang di blog

  • Log in ke blog anda
  • Klik Rancangan
  • Klik Tambah Gadget
  • Pilih HTML/JavaScript
  • Masukkan kode berikut ke dalamnya
<style type="text/css" scoped="scoped">
#gb{position:fixed; top:10px; z-index:+1000}
* html #gb{position:relative}
.gbcontent{float:right; border:2px solid #A5BD51; background:#fff; 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>
MASUKKAN KODE IKLAN ANDA DI SINI
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString()+"px";
</script></div></div>
  • Ganti kode merah dengan kode iklan anda
  • Klik Simpan dan lihat hasilnya

Bonus:

Kalau mau membuat slot iklan, masukkan kode berikut. Pilih salah satu yang cocok dengan selera anda. Kode iklan dibawah ini bisa dimasukkan pada iklan melayang untuk mengganti kode merah atau memasukkannya langsung di sidebar. Ganti kode kuning sesuai kebutuhan anda.

Slot dengan gambar

<div style="margin:10px 0 10px;padding:0;text-align:center;display:block;">
<a href="http://www.bengkelblogger.net/" target="_blank" title="slot iklan Rp.10.000/bulan"><img alt="bengkel blogger ads" src="http://i745.photobucket.com/albums/xx97/bengkelblogger/slot%20iklan%20bengkel%20blogger_zpsndsmh7ca.png" /></a>
</div>

Slot tanpa gambar

<div style='background: #EEEEEE; text-decoration: none; border: 1px solid #BDC3C7; width:300px;height:250px;margin:0;padding:0;text-align:center;position:relative'>
<div style="padding-top:55px;">
<span style="font:30px Oswald;">Pasang Iklan </span><br/>
<span style="font:40px Oswald;">300x250 </span><br/>
<span style="font:30px Oswald;">Murah</span></div><br/>
<a style="text-decoration: none; padding:35px 5px 0 0;float: right;color:#b0130d;" href="http://www.bengkelblogger.net/" target="_blank" title="Pasang Iklan Murah Rp. 10.000/ bulan"><small>Ads by Bengkel Blogger</small></a><br /></div>
Demikian tutorial membuat iklan melayang di blog. Semoga artikel iklan melayang di blog ini bermanfaat bagi semua, amin. Selamat mencoba dan sukses selalu. Salam sahabat blogger.
Mau baca sesuatu yang ngawur dan konyol? dijamin lucu!!! KLIK DI SINI

Share this: