Hiển thị ChatBox gắn vào thanh lề bên phải.

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 wordpress, Nhưng 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. Bạn chỉ cần paste đoạn code này vào trước thẻ /body trong footer.php là được.
Demo các bạn có thể thấy ngay trên blog này

<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 title="hutek" src="http://www6.shoutmix.com/?xxx" width="200" height="300" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?xxx">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>

Trong đó xxx là nick bạn lập trên shoutmix.
Chúc các bạn thành công!
Theo dangnghienIT

Posted in: Thủ Thuật Blog