How to style your chatbox

How to style your chatbox like sample here? What do you need is just copy the code below (code only, not include the line number), replace some lines of code, and it is done!

To adjust the position of chatbox tab, you need to edit line #4.

To change the image of chatbox tab, you need to change the image url in line #14. You also can edit the height and width of image by editing line #10 and #11 respectively.

Where do we need to put the chatbox’s code? Just replace the line #45 with your own chatbox code. And you are done!

<style type="text/css">
#gb{
    position:fixed;
    top:0px;
    z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://img40.imageshack.us/img40/5490/tpink.png') no-repeat;
}
.gbcontent{
    float:left;
    border:2px solid #666666;
    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" style="right: -204px; ">
<div class="gbtab" onclick="showHideGB()"></div>
<div class="gbcontent">

    REPLACE YOUR CODE HERE

<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>

This is a re-post of my old entry. I found that someone is searching for the old article which is not available anymore on my blog. If any of you want to read the old post of my blog, please do request and I’m glad to write it again for you.

Go to Colorful tab image for chatbox if you are searching for how to change your tab color.

Happy coding!