Chức năng Ẩn và Hiển thị hộp thoại Chat đẹp tuyệt

Wednesday, 30 December 2009

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('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; } </style> <script type='text/javascript'> 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);} } </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>
<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>
</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.