Hiển thị ChatBox cực pro!!!!

(danghienIT) - Như các bạn đã biết Chat Box là một ứng dụng không thể thiếu đối với một trang Webblog. Bài viết này mình sẽ lại giới thiệu một cách để hiển thị Chat Box trông thật chuyên nghiệp nhưng cách thực hiện rất đơn giản.

Để thực hiện, các bạn tạo 1 widget HTML/Javascript và dán toàn bộ code của thủ thuật vào.

- Dưới đây là toàn bộ code của thủ thuật :


<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://farm3.static.flickr.com/2636/3935353655_32c6d2bb30_o.png') 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 class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="180" frameborder="0" src="http://www6.shoutmix.com/?quanghien" height="300" title="danghienit">
<a href="http://www6.shoutmix.com/?quanghien">View shoutbox</a>
</iframe>
<!-- End ShoutMix -->

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