Pernahkah melihat ada suatu blog yang bagian depannya tertutup oleh iklan yang melayang?, hal ini dilakukan oleh kebanyakan blogger untuk meningkatkan jumlah klik iklan mereka, atau bisa juga supaya iklan yang ditampilkan mudah terlihat. Membuat iklan yang melayang di wordpress memang sedikit mengganggu tampilan dari suatu blog, hal ini karena menyebabkan si pengunjung blog harus selalu menutup tampilan iklan itu setiap mereka membuka halaman/artikel baru.
Namun, jika ada yang ingin membuat optimasi iklan agar lebih meningkatkan jumlah klik/CTR memang cara ini lumayan jitu, karena terkadang ketika si pengunjung kita mengklik tanda “close” untuk menutup iklan yang tampil kadang iklan yang letaknya dempetan dengan tombol “close” akan terklik secara tidak sengaja.
Lalu, bagaimana cara membuat iklan melayang di wordpress tersebut?, ok berikut tutorialnya:
1. Masuk ke Panel File manager pada akun hosting anda, kemudian masuk ke bagian themes blog anda dan kemudian cari file bernama header.php, lalu kemudian masukan kode di bawah ini diatas <body> setelah <head> :
<script type=”text/javascript”><!–
var persistclose=0
var startX = 100 <!– jarak kiri atas horizontal iklan ke browser –>
var startY = 100 <!– jarak kiri atas vertikal iklan ke browser –>
var verticalpos=”fromtop”
function iecompattest(){
return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie=”remainclosed=1″
document.getElementById(“topbar”).style.visibility=”hidden”
}
function staticbar(){
barheight=document.getElementById(“topbar”).offsetHeight
var ns = (navigator.appName.indexOf(“Netscape”) != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie(“remainclosed”)==”” )
el.style.visibility=”visible”
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+”px”;this.style.top=y+”px”;};
el.x = startX;
if (verticalpos==”fromtop”)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos==”fromtop”){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY – ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight – barheight: iecompattest().scrollTop + iecompattest().clientHeight – barheight;
ftlObj.y += (pY – startY – ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(“stayTopLeft()”, 100);
}
ftlObj = ml(“topbar”);
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener(“load”, staticbar, false)
else if (window.attachEvent)
window.attachEvent(“onload”, staticbar)
else if (document.getElementById)
window.onload=staticbar
–></script>
lalu simpanlah file yang sudah anda tambahkan tadi.
2. Lalu sekarang masuk ke file Style.css, dan masukan kode berikut:
/*****iklan melayang*******/
#topbar{ position:absolute;
width: 630px; <!–ukuran iklan –>
visibility: hidden;
z-index: 400;
border: 2px solid #000000; <!– ukuran dan warna border –>
padding: 5px;
background-color: #ffffff; <!–warna background –>
-moz-border-radius:8px; font: 12px georgia, arial, Verdana, sans-serif; line-height:16px;}#topbar:hover{ background-color: #ffffff;}
.tolbarclose {cursor:default;}
3. Selanjutnya pada tahap ketiga ini anda bisa memasukan kode iklan yang ingin anda tampilkkan, kode berikut dapat diletakan di widget sidebar anda, berikut sciprtnya:
<div style=”visibility: visible;top: 1615px;” id=”topbar”>
<div style=”padding:5px;”><p>Tutup iklan <a href=”#” onclick=’closebar(); return false’ > Close (x)</a></p>
letakkan kode iklan/foto narsis disini hihiih
</div>
</div>
Nah, script yang saya berikan diatas adalah sciprt untuk membuat iklan melayang/ floating ads atau bisa disebut juga floating image.
Tag:
October 6, 2010 at 10:56 am
Coba dulu ahhhh… :-)
[Reply]
November 17, 2010 at 3:21 am
Kalo buat di blogger bisa ga, Ty.
[Reply]
November 26, 2010 at 10:39 pm
mas. stylenya di tempel dimana? kok gak ada penjelasan? thanks
[Reply]
admin Reply:
December 3rd, 2010 at 9:14 am
dimana aja mas, asal jangan “motong” coding yang lain, itu kan ada per baris nya sendiri-sendiri, ditandai dengan simbol #
[Reply]
December 20, 2010 at 4:14 pm
makasi triknya
[Reply]
December 27, 2010 at 12:03 am
nice info sob!salam kenal!
[Reply]
February 4, 2011 at 4:18 am
info yang sangat menarik . terima kasih telah berbagi bos
[Reply]
admin Reply:
February 6th, 2011 at 9:31 am
sama-sama
[Reply]
February 27, 2011 at 4:25 pm
makasih tipsnya bos
tapi menurut ane blog dengan iklan kayak gini sangat mengganggu
[Reply]
Lulu Kemaludin Reply:
August 3rd, 2011 at 10:08 pm
@cekay, Tergantung kebutuhan, kalo blognya memang untuk ikut internet program / PPC, ini kan salah satu cara untuk meningkatkan earning…
Ada kok plugin-nya juga.. Gak terlalu repot, kita juga bisa atur kapan tayangnya..
[Reply]
admin Reply:
August 4th, 2011 at 3:13 pm
oh ada pluginnya juga ya? wah boleh deh di jadiin bahan tulisan.
[Reply]
March 26, 2011 at 12:41 pm
makasih tutor nya mas…
[Reply]
August 16, 2011 at 6:18 pm
bro, saya udah memasang semua script koq masih tidak berfungsi ya, malah webku berantakan
[Reply]
admin Reply:
August 18th, 2011 at 5:17 am
kalau error pakai plugin aja bro di wordpress
[Reply]