Trang chủ > Thủ thuật blog > Chèn hộp thoại chat vào blog

Chèn hộp thoại chat vào blog

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ể chát 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 chát 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.

Hình ảnh minh họa

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ẻ và save lại


#gb{
position:fixed;
top:31px;
z-index:+1000;
}
* html #gb{position:relative;}

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

function showHideGB(){
var gb = document.getElementById("gb");
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("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);}
}

4. Kế tiếp tạo HTML/Javascript Và thêm code sau vào HTML/Javascript

var gb = document.getElementById(“gb”);
gb.style.right = (24-gb.offsetWidth).toString() + “px”;

Ở đây minh sử dụng 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.
Chúc bạn thành công

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: