Membuat Iklan Melayang (Float Top Bar)

Float Top Bar adalah sebuah objek melayang atau biasanya berupa jendela kecil yang muncul pada halaman suatu blog. Float Top Bar ini biasanya berupa konten iklan, deskripsi, Login form dsb. Untuk membuat konten melayang seperti ini sangat mudah. Mari kita ikuti langkah-langkah berikut ini

Langkah-langkah memasang Float Top Bar :

• Login ke akun blog anda
• Tab Tata letak - Tambah elemen - HTML/Javacript
• Letakkan script berikut

<a onblur="try {parent.

deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNOIgjbQq67_I0ydTjTgHjekYuAjZwOJJI2OZ40PxRvDskwLsV05wma-Xb6HZn7PuRMT5TU_ViZnY7JHW5OMx4RpikQgY34YurMPZuKzeXgOOYgX7cUMnPuESUj1RCCB-UkSXtjnO5_U/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/AVvXsEglNOIgjbQq67_I0ydTjTgHjekYuAjZwOJJI2OZ40PxRvDskwLsV05wma-Xb6HZn7PuRMT5TU_ViZnY7JHW5OMx4RpikQgY34YurMPZuKzeXgOOYgX7cUMnPuESUj1RCCB-UkSXtjnO5_U/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>

Masukan Konten Anda disini !

</center>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.center = (30-gb.offsetWidth).toString() + "px";

</script></center></div></div>

• Save

Coba lihat hasilnya, mudahkan ! tunggu artikel saya selanjutnya..

Digital Areas