Cách làm chatbox ẩn hiện ở sidebar

Chào các bạn, hôm nay mình sẽ giới thiệu cách làm chatbox ẩn hiện như  ở Tập Viết Blog. Hôm trước mình sang blog Nghĩa Đời thấy hay hay và mang về áp dụng cho Tập Viết Blog. Cách làm thực ra rất đơn giản, các bạn có thể tuỳ biến làm Gallery, Link liên kết, Logo thay Chatbox cũng có thể được v.v…

Demo online : http://tapvietblog.info/

Bình thường Chatbox sẽ thu gọn vào thế này :

Khi đưa chuột click vào nút Chatbox nó sẽ hiện ra từ từ thế này :

Cách làm :

Bạn chỉ cần add đoạn code sau trước thẻ trong template của bạn là được. Nhớ tuỳ biến các phần mà mình đã chú thích vào nhé Nếu bạn biết về CSS và Javascript thì bạn hãy tuỳ biến cho khác người đi nhé. Chúc thành công !

Chú ý : Nếu khách disable Javascript khi lướt web thì cái chatbox đó sẽ chạy thẳng sang bên trái đấy Vì thế ở phần tuỳ chọn bạn nên nói với khách bật Javascript lên.

#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;
}
<script type="text/javascript"><!--mce:0--></script>

<div id="gb">
<div class="gbcontent">
<!-- Begin Chatbox -->
Nơi bạn điền code chatbox.
<!-- End Chatbox -->
<!-- Thông tin tuỳ chọn -->
Phần này bạn điền gì cũng được. Ví dụ email, nickchat, số điện thoại...
<!-- Thông tin tuỳ chọn- -->
<div style="text-align: right;"><a href="javascript:showHideGB()">
[Hide SHOUTBOX]
</a></div>
</div>
</div>
<script type="text/javascript"><!--mce:1-->