Chat Box đẹp với chức năng Ẩn và Hiển thị hộp thoại Chat

Hộp Chat Box dạng thu gọn giúp bạn tối ưu hoá hình ảnh của Weblog do ưu điểm không chiếm không gian trên các trang Page, khi cần sử dụng bạn chỉ cần click vào chữ “Chat Box” thì hộp thoại sẽ hiện ra, và cũng thao tác đó bạn ẩn giấu chúng một cách nhanh chóng.

Sau đây là cách thực hiện để tạo được một Hộp Chat Box như vậy :

Bước 1: Truy cập vào Blogger / Layout / Edit HTML

Bước 2: Dán đoạn code dưới vào phía trên </head>

<style type=’text/css’>
#gb{
position:fixed;
top:31px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:81px;
width:24px;
float:left;
cursor:pointer;
background:url(&#39;http://lh3.ggpht.com/_rVQLxDFDz0A/SsV-6MbJNAI/AAAAAAAAB8c/gM04HoC_fZA/chatbox.png&#39;) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #f38d02;
background:#e49b00;
padding:3px;
}
</style>

<script type=’text/javascript’>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 24-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

Bước 3: Vào Blogger / Layout / Page Element và tạo một tiện ích (Add a Gadget) dạng HTML/Javascript

Bước 4: Dán đoạn code dưới vào tiện ích HTML/JavaScript vừa tạo

<div id=”gb”>
<div onclick=”showHideGB()”>
</div>
<div class=”gbcontent”>
<strong>Chat Box</strong>
<center><!– Begin ShoutMix – http://www.shoutmix.com –>
<iframe scrolling=”auto” width=”300″ frameborder=”0″ src=”http://www2.shoutmix.com/?chinhnd” height=”450″ title=”chinhnd”>
<a href=”http://www2.shoutmix.com/?chinhnd”>View shoutbox</a>
</iframe>
<!– End ShoutMix –></center>
<div style=”text-align: right;”>

<a href=”javascript:showHideGB()”>
<span style=”color: #660000;”>[Ẩn Chat Box]</span>
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (24-gb.offsetWidth).toString() + “px”;
</script>

Trong đó: Đoạn code màu đỏ là code của hộp chát box. Nếu ai chưa đăng ký thì vào trang này để đăng ký 1 tài khoản : Đăng ký tại đây