Chèn hộp chat vào blog

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

12 nhận xét

  1. 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

    Trả lờiXóa
  2. 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!:-*

    Trả lờiXóa
  3. 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

    Trả lờiXóa
  4. 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.

    Trả lờiXóa
  5. 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 ạ?

    Trả lờiXóa
  6. 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.

    Trả lờiXóa
  7. demo của anh đưa đâu có hộp chatbox nào đâu ạ?

    Trả lờiXóa
  8. 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é!

    Trả lờiXóa
  9. 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 ạ?

    Trả lờiXóa
  10. 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ả.

    Trả lờiXóa
  11. làm đc nhưng k chát được, chỉ hiển thị lên blog thôi

    Trả lờiXóa