Chat Box đẹp với chức năng Ẩn và Hiển thị hộp thoại Chat

Hộp Chat Box dạng thu gọn giúp bạn tối ưu hoá hình ảnh của Weblog do ưu điểm không chiếm không gian trên các trang Page, khi cần sử dụng bạn chỉ cần click vào chữ "Chat Box" thì hộp thoại sẽ hiện ra, và cũng thao tác đó bạn ẩn giấu chúng một cách nhanh chóng.

Sau đây là cách thực hiện để tạo được một Hộp Chat Box ẩn giấu được mà anh3ngơ học lỏm được:


Bước 1: Truy cập vào Blogger / Layout /  Edit HTML



Bước 2: Dán đoạn code dưới vào phía trên </head>

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

.gbtab{
height:81px;
width:24px;
float:left;
cursor:pointer;
background:url(&#39;http://lh3.ggpht.com/_rVQLxDFDz0A/SsV-6MbJNAI/AAAAAAAAB8c/gM04HoC_fZA/chatbox.png&#39;) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #f38d02;
background:#e49b00;
padding:3px;
}
</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ước 3: Vào  Blogger / Layout /  Page Element và tạo một tiện ích (Add a Gadget) dạng HTML/Javascript


Bước 4: Dán đoạn code dưới vào tiện ích HTML/JavaScript vừa tạo

<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong>Chat Box</strong>

<center><!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe scrolling="auto" width="300" frameborder="0" src="http://www2.shoutmix.com/?chinhnd" height="450" title="chinhnd">

<a href="http://www2.shoutmix.com/?chinhnd">View shoutbox</a>

</iframe>

<!-- End ShoutMix --></center>

<div style="text-align: right;">

<a href="javascript:showHideGB()">
<span style="color: #660000;">[Ẩn Chat Box]</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>

Trong đó: Đoạn code màu đỏ là code của hộp chát box, như anh3ngơ sử dụng dịch vụ là của shoutmix, các bạn có thể tạo shoutmix theo hướng dẫn Tạo Shoutbox để chatvới khách thăm blog.


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

 

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.