Cara Mudah Membuat Kotak Iklan Melayang di Blogspot

Cara Mudah Membuat Kotak Iklan Melayang di Blogspot. Anda pernah mellihat iklan yang melayang di sebuah blog. itu dinamakan Floating bar atau kotak melayang, kotak melayang bisa digunakan untuk memasang script iklan, menampilkan iklan, atau menampilkan pesan tertentu. Dalam contoh ini kita akan membuat kotak iklan melayang  di blog dengan dilengkapi tombol close agar memudahkan pengguna atau pengunjung blog menutup kotak tersebut. biasanya kotak iklan melayang di blog tersebut sangat jitu untuk mensposorkan produk produk anda.

Mendapatkan Uang dari Internet dengan Affiliasi ti.co.id

Mendapatkan Uang dengan AdsenseCamp

Berikut ini adalah panduan blog membuat kotak iklan melayang.

Script ini bersumber dari dynamic drive float bar

untuk membuat kotak melayang, kamu bisa mengikuti langkah langkah sebagai berikut:

1. Login ke akun blogger

Pilih Tata letak - Edit html

cari kode 

</head>

Sebelum kode </head>

 Masukkan kode CSS berikut :

<style type="text/css">

#topbar{

position:absolute;

border: 1px solid black;

padding: 2px;

background-color: lightyellow;

width: 620px;

visibility: hidden;

z-index: 100;

}

</style>

Simpan template

2. Pada elemen halaman pilih tambah gadget , pilih gadget HTML/Javasript

Masukkan kode berikut ke dalam gadget html/javascript

<script type="text/javascript">

/***********************************************

* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)

* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)

* This notice must stay intact for legal use.

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 30 //set x offset of bar in pixels

var startY = 5 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

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()", 10);

}

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>

<div id="topbar">

<a href="" onClick="closebar(); return false"><img src="http://i41.tinypic.com/5fofva.jpg" border="0" /></a>

Masukkan script iklan disini

</div>

catatan:

Dalam contoh ini saya memasukkan script ppc kumpul blogger 

<div id="topbar">

<a href="" onClick="closebar(); return false"><img src="http://i41.tinypic.com/5fofva.jpg" border="0" /></a>

<script src="http://kumpulblogger.com/scahor.php?b=56386" type="text/javascript"></script>

</div>

Penting:

Saya sarankan pada anda yang ingin memasang kotak iklan melayang pada blog, sebaiknya gadget html diletakkan di bagian footer blog.