(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>
- Thay đổi các địa chỉ cbox hoặc shoutmix để phù hợp với trang blog của bạn.
Chúc các bạn thành công!

Đang tải xin vui lòng chờ...
2 comments:
thu thuat rat hay ! em da ap dung! trong pro cuc ! thank
Cám ơn nhé, rất hay đấy
Post a Comment
[▼/▲] Chèn biểu tượng vui