Hiển thị Chat Box trượt dọc theo trang

Như các bạn đã biết Chat Box là một ứng dụng khá hay đối với blog, nó làm cho tính tương tác của blog tăng lên rất nhiều, hiện nay có rất nhiều cách làm một chat box pro, đặc biệt là với blogspot. Bài viết này sẽ 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. Bạn chỉ cần paste đoạn code này vào trước thẻ </body> trong code HTML của blog.

 

Xem live demo ở đây

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://farm3.static.flickr.com/2636/3935353655_32c6d2bb30_o.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #990000;
background:#F5F5F5;
padding:7px;
}
</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">

   <!-- Chèn code hiển thị chat box tại đây //-->

<div style="text-align:right">
<a href="http://www.itdl.in/?p=398" style="font-size:11px">
[ Get Code ]
</a>
<a href="javascript:showHideGB()" style="font-size:11px">
[ Ẩn Chatbox ]
</a>
</div>

</div>

</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Các thông số:

- Màu xanh: khoảng cách từ đầu trang tới chat box

- Màu cam: link đến nút bật/tắt chat box

- Màu đỏ: code để chèn chat box (thường dùng code của cbox và shoutmix)

Chúc bạn thành công !

Tham khảo từ hutek.info