"Chèn hộp chat vào blog"

(Traidatmui.com) – Một trong những điều khiến cho khách ghé thăm blog hay web của bạn cảm thấy thú vị là có thể chat trực tiếp trên đó. Hộp thoại chát là nơi để khách ghé thăm giao lưu kết bạn với nhau, và cũng là nơi để liên hệ với quản trị blog hay web. Vì thế trên mỗi blog hay web cần có thêm tiện ích chat này sẽ làm cho trang blog hay web bạn trở nên thu hút khách ghé thăm hơn. Để có thể đưa hộp thoại chát vào blog hay web bạn có thể tham kham thủ thuật sau, mình sẽ giới thiệu đến các bạn cách đưa vào blog. Kết quả thủ thuật này sẽ làm cho nút chatbox có dạng ẩn hiện khi click vào nút sẽ tiết kiệm được không gian.

☼ Cách thực hiện:

1. Đầu tiên đăng nhập và vào bố cục blogger
2. Chọn Edit HTML
3. Dán đoạn code dưới lên trước thẻ </head> và save lại

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

.gbtab{
margin-top:-1px;
height:96px;
width:26px;
float:left;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSshDKfu1IDEIiuOwpnP96E834deOzQh0LAATm2ea2Yq9eF9yFYpMyEu7aL9RdD1_VkP-MbuOn1Bx-lTnGs36r10MLUe0H9ABV8Jb9sx5gOyggNP1bgYl_CkvFLUGnOGte0wtVDoN9MLUQ/) no-repeat;
}
.gbcontent{
float:left;
border:3px solid #ccccff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4s7xz1wWfO46tO6uXaSS05ULBikuYo_iNCAjNuYb4KAmWMU2tjMuPllhMSNsm5a2yOPWUZIoIoO27Rm-gTYVmAa7J-RhC99aETHrb4RhHy-Yd9xM49d_JMRb1y9AkKRaycBBcu6Jr8Iyz/s512/Screenshot-5.png);
padding:5px 15px 3px 15px;
line-height:1.3em;}
</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ạn có thể thay các code màu xanh trên thành hình ảnh nền mà bạn thích hoặc dựa vào mã màu ở đây để chọn màu nền bạn thích.
4. Kế tiếp tạo HTML/Javascript và thêm code bên dưới vào nó

<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong><span style=" ">Chat with friends</span></strong>

<center> <!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="nvdinh88" src="http://www6.shoutmix.com/?nvdinh88" width="300" height="400" frameborder="0" scrolling="auto"><a href="http://www6.shoutmix.com/?nvdinh88">View shoutbox</a></iframe><br /><!-- End ShoutMix --> </center>
<div style="text-align: right;"><span style="float:left; ">Chat on TRAIDATMUI.COM</span>
<a href="javascript:showHideGB()">[Ẩn Chatbox]
</a></div></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>

☼ Tùy chỉnh: bạn hãy thay đoạn code màu đỏ ở trên thành code chat của bạn, ở đây minh sử dụng dịch vụ shoutmix, để tạo shoutbox bạn có thể vào đây và điền đầy đủ thông tin để tạo cho mình một shoutbox và thay thế code màu đỏ ở trên.
- Hãy thay đổi những dòng chữ in đậm trên thành dòng chữ của bạn hoặc bạn cũng có thể xoa nó đi.

Chúc bạn thành công 

Nguồn: TRAIDATMUI.com