Chat Box Đẹp Với Chức Năng Ẩn Và Hiển Thị Hộp Thoại Chat

www.saigonnews.co.cc

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.