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 blogspot này, cách thực hiện rất đơn giản. Bạn chỉ cần paste đoạn code mẫu này của tôi (Lưu ý: Là chỉ thay code Shoutmix của bạn) vào trước thẻ đóng hoặc sau thẻ đóng trong template (chỉnh sửa HTML) là OK, có thể xem trước để thấy kết quả và áp dụng nhé.
Bạn có thể tùy chỉnh các thông số màu đỏ để phù hợp với blog của bạn, code màu xanh là thay code Shoutmix của bạn, code màu cam là thay chữ hoặc ảnh nút ẩn boxchat hoặc thay logo chat box ở code màu tím:














Code:

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRvzEQluLdLcBm-a38mAiSXDO_-8QJADlDYDIzbt7eHPXeiQSBVD5MbcUVf89VLyz4PFWuB7-g2H15sON0SENFCXjOeUyVw-WSBOdVg6at8N3tWPYTDuFYMg-aGb-0gXo707pIvlc4W04/s1600/CHATBOX.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #0099FF;

background:#ffffff;

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="nguyen_hoa" src="http://www.shoutmix.com/?nguyen_hoa" width="200" height="300" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?nguyen_hoa">View shoutbox</a></iframe><!-- End ShoutMix -->

<!-- End ShoutMix -->



<div style="text-align:right">

<a href="javascript:showHideGB()"><img src="http://cdn4.iconfinder.com/data/icons/Hypic_Icon_Pack_by_shlyapnikova/16/forum_16.png" border="0" title="Ẩn chat box"></img>

</a>

</div>



</div>



</div>



<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>