QuangTrong's Blog

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.

<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 onclick="showHideGB()"> </div><div><!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="quangtrong" src="http://www6.shoutmix.com/?quangtrong" width="200" height="300" frameborder="0" scrolling="auto"><a href="http://www6.shoutmix.com/?quangtrong">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 đó quangtrong bạn thay bằng nick bạn lập trên shoutmix.
Chúc các bạn thành công!