How to Make a chatbox or shoutmix Being on the side

Chatbox or shoutmix is the most popular widgets for most bloggers. Tips blog we will discuss this time is how to build chatbox or shoutmix Located on the side to our blog.
How to make it you can follow the simple steps below:  
1. you must have a chatbox or shoumix code first. I suggest you create an account at www.cbox.ws 
2. login to your blogger.com dashboard -> design -> add gadget -> select the 'HTML / JavaScript' 
3. Copy the following code: 
<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://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') 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> 
<div id="gb"> 
<div class="gbtab" onclick="showHideGB()"> 
</div> 
<div class="gbcontent"> 
 put chatbox / shoutmix script here 
<br/> 
<br/> <a href="http://www.adityawebs.com">. </a> 
<div style="text-align:right"> 
<a href="javascript:showHideGB()"> [close] </a> 
</div>
 </div> 
</div> 
<script type="text/javascript"> var gb = document.getElementById("gb"); 
gb.style.right = (30-gb.offsetWidth).toString() + "px"; 
</script>
</div>
</div> 

You may change the put chatbox / shoutmix script here to your script chatbox.

4. Save, see the results.