Catatan Seorang Mahasiswa Teknik Informatika, yang ingin membagikan hasil karya dan catatannya ke publik agar berguna bagi yang lain.

Cara Membuat Shoutbox Melayang

Apakah anda ingin meletakkan shoutbox di blog atau website anda, jika anda mau anda tinggal mengcopy scriptnya dari shoutmix.com dengan cara mendaftarkan diri terlebih dahulu, kemudian anda akan mendapatkan script shoutbox dari shoutmix.com.
Tapi, script yang diberikan hanya biasa. Apakah anda ingin membuat Shoutbox tersebut melayang seperti blog saya ini ?
Berikut saya akan memberikan tips Cara Membuat Shoutbox Melayang.



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1119.photobucket.com/albums/k625/Irwansyach/cuap-1.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<!-- Begin ShoutMix - http://www.shoutmix.com/ --><iframe title="Irwansyach" src="http://www5.shoutmix.com/?Irwansyach" width="100%" height="460" frameborder="0" scrolling="auto">View shoutbox</iframe>
ShoutMix chat widget
<!-- End ShoutMix -->


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
 Jika anda ingin meletakkan di blogger, caranya adalah sebagai berikut :
  1. Login ke blogger.com, masukkan email dan password anda
  2. Menuju ke Rancangan
  3. Klik Tambah Gadget
  4. Pilih HTML/Javascript
  5. Copy paste script di atas
Catatan :
  • Background URL, dapat anda ganti  dengan gambar anda sendiri
  • Script yang berwarna biru tebal anda ganti dengan script yg di berikan dari shoutmix.com

2 comments

  1. thx gan atas sarannya ...
    sebenarnya sih saya tidak pernah ada masalah dlm blog saya :)
    semoga info anda bermanfaat bagi yang lain

    ReplyDelete
  2. makasih mas atas masukannya, smoga berguna buat yang lain juga :)

    ReplyDelete

Terimakasih telah berkunjung di Irwansyahblog, Semoga bermaanfaat |
Tuliaskan komentar anda di bawah ini !