Cara Membuat Widget Melayang

Written by RA_Syihan on Friday, October 01, 2010 | Category: Trick, Tutorial

Cara Membuat widget melayang itu sebenarnya mudah, tapi saya sendiri membuatnya dengan mengulang beberapa kali. Tapi mungkin anda bisa membuatnya hanya denga satu kali. Itu mungkin jika anda melihat semua step di bawah ini (harus semua):

1. Masuk ke Blogger
2. Masuk ke tata letak
3. Tambah Gadget
4. HTML/JAVASCRIPT
5. Masukan Kodenya di bawah ini :

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i895.photobucket.com/albums/ac151/simbahbrukno/th_Gb.jpg') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:transparent;

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(30-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

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

var dx = Math.abs(x0-xf) > 1 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe  frameborder="0" width="200" height="305"  src="http://www5.cbox.ws/box/?boxid=557612&amp;boxtag=63175r&amp;sec=main"  marginheight="2" marginwidth="2" scrolling="auto"  allowtransparency="yes" name="cboxmain" style="border: 0px solid;"  id="cboxmain"></iframe></div>

<div><iframe  frameborder="0" width="200" height="75"  src="http://www5.cbox.ws/box/?boxid=557612&amp;boxtag=63175r&amp;sec=form"  marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes"  name="cboxform" style="border: 0px solid;border-top:0px"  id="cboxform"></iframe></div>

</div>

<!-- END CBOX -->

<script type="text/javascript">

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

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

NB: warna merah kamu ganti dengan url gambar chat box kamu
       warna hijau kamu ganti dengan kode warna kesukaanmu (untuk border)
      warna biru kamu ganti dengan warna kesukaan kamu (untuk background chat box)
      warna ungu kamu ganti dengan kode chatbox kamu
6. Jangan kamu klik rich text , karena jika di klik akan gagal
7. Langsung klik simpan dan lihat hasilnya

sumber