Beranda » teknik blog » Buat Tampilan Iklan Melayang

Buat Tampilan Iklan Melayang

Salah satu faktor yang penting dalam menjalankan optimalisasi iklan PPC adalah dengan penentuan tata letak iklan yang baik. Selain menempatkan iklan pada bawah judul postingan blog dan iklan pada bawah isi postingan blog, alternatif lain yang dapat kita gunakan adalah dengan menempatkan iklan dengan tampilan melayang. Iklan yang ditampilkan melayang ini cukup efektif dalam mendatangkan “klik” dari para pembaca blog kita. Dengan tampilan yang melayang, iklan ini akan muncul mengikuti ke manapun pengunjung membuka halaman blog kita. Secara logis hal ini akan mengganggu pandangan pengunjung dalam membaca kan? Akan tetapi, di sini lah sebenarnya letak keuntungannya. Pengunjung akan terfokus pada iklan ini. Dan jika ada iklan menarik yang membuat pengunjung penasaran, kita akan beruntung karena kemungkinan iklan tersebut diklik semakin besar.

Tampilan ini juga sebenarnya tidak begitu mengganggu, karena saat pembaca mengklik iklan atau mengklik tombol close sebanyak dua kali maka iklan akan tertutup dan tidak akan muncul lagi dengan sendirinya. Wao, terkesan menarik untuk dicoba kan?

Cara membuat tampilan iklan melayang adalah sebagai berikut ;

Masuk ke akun blogger kita.
Klik fitur rancangan.
Klik add gadget.
Pilih HTML / JavaScript.
Masukan kode HTML untuk membuat tampilan iklan melayang di bawah ini.

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSOsgCEZVppkDHqm9GGGYZocIKeXzzFCbM836XUKVNnZxdRkPMHWcNhURF-MH49KcOmyeCKi2761HJgBf2SQixD3HgmCxMFeaR_g9QADs7tDxAnBjH-syalA8BQKNcLkiRuF-W6vWVo4/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSOsgCEZVppkDHqm9GGGYZocIKeXzzFCbM836XUKVNnZxdRkPMHWcNhURF-MH49KcOmyeCKi2761HJgBf2SQixD3HgmCxMFeaR_g9QADs7tDxAnBjH-syalA8BQKNcLkiRuF-W6vWVo4/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

<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>

Letakan kode iklannya di sini.

</center>

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

Klik simpan dan selesai.

Cara untuk membuatnya mudah sekali bukan?

Kita hanya perlu menggunakan kode HTML dan memasangnya sebagai salah satu widget tanpa perlu melakukan edit HTML template seperti saat ingin menampilkan iklan pada bawah judul postingan dan bawah isi postingan blog. Selain itu, kita juga tidak perlu memphrase kode iklan terlebih dahulu. Mengapa? Karena kode iklan ini tidak akan dimasukan dalam kode HTML template, sehingga tidak perlu phrase agar kode HTML iklan menjadi “match” dengan kode HTML template.

Ada yang sudah pernah membuatnya?

Kalau ada yang sudah pernah, yuk kita bagi-bagikan pengalaman dan pengetahuan kita..