Kamis, 29 Juli 2010

Membuat Iklan Melayang Dengan Button Close ... !



dari membaca judul ini saja kalian pasti sudah mengerti dan mungkin sudah tidak asing lagi judul ini di dunia blogger, kalo ga percaya coba kalian searching di mbah google cara membuat iklan melayang, pasti ketemu banyak.
namun disini saya hanya ingin berbagi dengan kalian, siapa tahu aja ada diantara ribuan blogger yang belum tahu cara membuatnya.
disini saya akan menjelaskan gimana proses pembuatannya, mau tahu kan ...?
Login dulu ke bloger kalian, setelah itu ikuti langkahnya dibawah ini :
1. masuk ke Rancangan/Tata Letak.
2. klik tambah Gadget atau tambah elemen.
3. Pilih HTML/Java script.
4. Nah Copy kode dibawah ini dan paste disana. jangan lupa simpan templatenya ya...

<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 script iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>
Keterangan :
== Kode berwarna merah adalah tempat untuk meletakkan script iklan/gambar.

Tutorial simple namun sangat bermanfaat... jangan lupa komentarnya ya...

No comments yet