Laman

Pages

Laman

Nov 3, 2010

Cách ẩn hiện Chat Box khá đẹp mắt trên Blogger

Chat Box là một công cụ giúp người đọc qua Blog của bạn có thể để lại những lời nhắn, thông điệp hoặc trao đổi thông tin với nhau. Tại trang Shoutmix chúng ta có thể đăng ký để tạo một Chat Box như vật khá dễ dàng.

Thủ thuật sau đây giúp ẩn hiện Chat Box và giúp tiết kiệm không gian Blog của bạn đồng thời làm cho diện mạo Blog trông đẹp mắt hơn.

Xem Demo.

Để thực hiện thủ thuật này, bạn chỉ cần đặt toàn bộ đoạn code sau đây vào trong một tiện ích HTML/JavaScript trên Blogger.
<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('http://farm3.static.flickr.com/2636/3935353655_32c6d2bb30_o.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #990000;
background:#F5F5F5;
padding:7px;
}
</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">
<iframe title="abcdXXXX" src="http://www4.shoutmix.com/?abcdXXXX" width="200" height="360" frameborder="0" scrolling="auto"></iframe>
<div style="text-align:right">
<a href="javascript:showHideGB()" style="font-size:11px">
<b>x</b> Đóng lại
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
</div>
<div class='clear'></div>
Chú ý đoạn code giữa 2 thẻ <iframe>, </iframe> chính là code mà bạn lấy từ Shoutmix và thay abcdXXXX bằng id trên Shoutmix của bạn.

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D