Kali ini kita akan membuat sesuatu yang sangat menarik, sesuatu yang melayang pada blog atau website, dan bisa diisi apa pun yang kamu mau seperti foto kamu, jam, iklan atau widgate2 lain yang kamu inginkan, oiya kode JavaScript ini juga dilengkapi dengan clos/tutup supaya tidak mengganggu pengunjung. Baiklah kita langsung saja mulai untuk mengetahui cara membuatnya:
- Masuk dulu dong ke blog kamu kalau ga ya ga tau caranya, hehehe
- Pilih Rancangan pada halaman Dasbor
- Kemudian pilih Tambah Widget
- Setelah itu baru kita pilih HTML/JavaScript
- Dan salin kode di bawah agar widgate atau iklan kita bisa melayang.
<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 Kode JavaScript atau Link 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: Tulisan yang Berwarna Biru adalah tempat kode widget, link foto, atau kode iklan kamu. Tulisan yang Berwarna Merah adalah warna garis tepi dan body background.
Tags : 
