Cara Buat Floating Chatbox / Buku Tamu Blog

Lagi-lagi, kembali saya mengingatkan kembali bahwa disini saya hanya sekedar berbagi informasi saja. Well, apaan sih Shoutmix atau Buku Tamu ? Langsung cek aja di Blog saya bagian pojok kanan. Itu dia Shoutmix. Ngerti kan ?? Silahkan artikan sendiri-sendiri saja.

Gimana cara buatnya ?? sebenernya gak perlu diajarin juga bisa, nih langsung aja ke create your own shoutmix.

Nah, disana kamu tinggal pilih create shoutbox lalu isikan data-datamu yang ditanyakan di sana. Hingga sampai kotak dialog seperti ini :

setelah itu, copykan kode HTML/Java Scriptnya ke Blogmu dengan cara menambahkan widget ke Blog >> Templates >> Add HTML/javascipt, lalu pastekan ke widget yang baru saja kamu buat.

[Update]

Saat ini shoutmix sudah tidak bisa digunakan secara gratis lagi, jadi kamu bisa mencari chatbox lainnya, mungkn saya merekomendasikan cbox sebagai pengganti shoutmix, jika kamu ingin mencobanya, silahkan langsung kesitusnya HERE

Lalu ?? ngapain lagi nih ? Sekarang sudah saya sediakan kode khusus buat ngumpetin si Shoutmix/cbox tadi biar gak makan tempat. Gimana caranya ? di widget shoutmix yang baru saja kita buat tadi, anda tinggal copas kode dibawah dan taruh di atas code shoutmix/cbox atau chatbox lainnya. 

<style type="text/css"> 
#gb{ 
position:fixed; 
top:50px; 
z-index:+1000; 
} 
* html #gb{position:relative;} 
.gbtab{ 
height:150px; 
width:30px; 
float:left; 
cursor:pointer; 
background:url('http://i52.tinypic.com/e1c96g.jpg') no-repeat; 
} 
.gbcontent{ 
float:left; 
border:2px solid #990000; 
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> 
<div id="gb"> 
<div onclick="showHideGB()"> </div> 
<div> 

########KODE CHAT BOX : Shoutmix,Cbox, Dll #########
 
<div style="text-align:right"> 
<a href="javascript:showHideGB()"> 
[Hide] 
</a> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
var gb = document.getElementById("gb"); 
gb.style.right = (30-gb.offsetWidth).toString() + "px"; 
</script>

Nah, normalnya tampilan Shoutmix/buku Tamu itu ada di bagian Side Bar dalam Blogmu, sekarang kita akan membuatkan tempat khusus buat si Shoutmix agar tidak memakan tempat dan terlihat rapih. Seperti berikut :