Rabu, 21 September 2011

Cara Membuat Iklan Melayang


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.

0 komentar:

Posting Komentar

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes