"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(http://lh3.ggpht.com/_BTztXRwC9ik/S7xnQTtFe0I/AAAAAAAABwo/3KGvxJKp-u8/1270638281.png) no-repeat;
}
.gbcontent{
float:left;
border:3px solid #ccccff;
background: url(http://lh5.ggpht.com/_BTztXRwC9ik/S4oMnKQmnFI/AAAAAAAAAII/glcZCfarsbA/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

Tổng hợp

Xem khác cùng chủ đề

11 nhận xét | Viết lời bình

5/08/2011 12:43:00 CH Trả lời

anh xem giúp em đoạn code trên thẻ head với ạ. Em làm như hướng dẫn mà ko lưu đc. nói cách khác, em downl mã html về máy rồi làm theo hướng dẫn sau đó em up lên thì nó báo lỗi

Hãy sửa lỗi bên dưới và gửi lại mẫu của bạn.
Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The element type "head" must be terminated by the matching end-tag "".

Anh xem lại giùm em với em cảm ơn

Admin
5/08/2011 05:51:00 CH Trả lời

Code trên không lỗi trong template đâu em, em hãy copy code trên và dán vào ngay sau thẻ <head> là được rồi em. Có thể em chỉnh sửa nhưng không đóng đúng thẻ nên bị lỗi đó, em làm theo hướng dẫn copy và dán code vào template như trên là ok!:-*

5/10/2011 07:40:00 CH Trả lời

Em đã làm nó ko báo lỗi gì nữa nhưng sao nó ko hiển thị chat box lên blogspot hả anh

Admin
5/10/2011 07:50:00 CH Trả lời

Anh không biết em thực hiện như thế nào,có đúng như các bước trình bày ở trên không? Và ở bước 3 em đã chỉnh sửa thế nào? Em nói rỏ anh mới có thể giúp em.

5/11/2011 11:28:00 SA Trả lời

Bước 3 em không chỉnh gì cả. Theo anh hướng dẫn thì post trên thẻ /head nhưng em post lên như vậy nó bị lỗi, anh hướng dẫn lại là post dưới thẻ head thì em làm như vậy và ok nhưng ra ngoài blog thì nó ko có chat box và em vào đổi link màu xanh thành ảnh khác cũng ko đc. anh có thể demo 1 blogspot mà có chat box trên đó được không ạ?

Admin
5/11/2011 11:28:00 CH Trả lời

Nếu em làm đúng như anh nói thì nó sẽ hiển thị đúng như ý muốn. Code bước 3 bạn chèn sau thẻ <head> hoặc trước thẻ </head> đều có tác dụng như nhau thôi em. Nếu muốn xem demo trên Blogger bạn xem tạm ở đây.

5/12/2011 12:09:00 CH Trả lời

demo của anh đưa đâu có hộp chatbox nào đâu ạ?

Admin
5/13/2011 08:26:00 CH Trả lời

Không hiểu sao hôm qua Blogger backup dữ liệu thế nào mà nó reset những cài đặt và các nhận xét mới đã bị mất. Bạn xem lại demo tại đây.

Thủ thuật này sẽ tạo một hộp chát nằm bên phải gần phía trên. Bạn vào trang dem xem phía bên phải gần ở trên sẽ thấy nút "Chatbox" bạn click vào đó xem demo nhé!

5/14/2011 07:47:00 SA Trả lời

Của em cũng bị reset lại hết phần cài đặt. Em tức lộn ruột ra.đinh mail lại chửi cho bọn admin phát mà ko biết mail. đúng là thứ 6 ngày 13. bực hết cả mình. em thấy chatbox rồi nhưng anh làm giống ở trên hướng dẫn ạ?

Admin
5/14/2011 07:57:00 SA Trả lời

Em thực hiện giống như trên chatbox sẽ hoạt động thôi em, anh đã test ở một số template không vấn đề gì cả.

Nặc danh
10/02/2011 01:40:00 SA Trả lời

ok

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang