Code ẩn hiện Chatbox cho Blogger

Một số blog có nhu cầu dùng chatbox,nếu để ở cạnh bên(sidebar)có thể sẽ chiếm nhiều không gian giao diện blog.Cách khắc phục vấn đề này đơn giản là tạo chatbox ẩn hiện,khi rê chuột vào hoặc click thì mới xuất hiện.
Ở đây chỉ giới thiệu code để ẩn hiện chatbox còn tạo chatbox thì các bạn truy cập các trang:
http://chatwing.com/
http://www.cbox.ws/
http://chatango.com/
Và còn nhiều trang nữa

Ở đây giới thiệu 2 cách thức ẩn hiện
Tự động xuất hiện chatbox khi rê chuột vào tai chatbox
DEMO
Click vào tai chatbox thì mới xuất hiện
DEMO

làm thế nào để áp dụng vào blogspot

Ta chỉ việc tiến hành thêm 1 tiện ích,tiện ích này để ở vị trí nào cũng được tốt nhất là để ở đáy blog và dán code sau vào
1- Trường hợp tự động xuất hiện khi rê chuột

<style type="text/css">
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.fbplbadge {background-color:Transprant;border:0px solid #fff;display: block;height: 160px;top: 20%;margin-top: -75px;position: absolute;left: -70px;width: 71px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt14aq_5cvWib5xmBryZ0z2VcwxA8IDMnKb7St_pAN4rLtkjA31sBiD1F4GjlIwZJ8OZFf0ENMz1NpC2VedSRxAYxVPkyKpCmQ-GbMEVXPR3YRkzyZ2NJE605GQdf73cm3kSmoheEjBE/s1600/chatbox.png);background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}.mdfbplikebox span{bottom: 12px;font: 10px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
(function(md){
md(document).ready(function(){
var $dur = "medium"; // Duration of Animation
md("#fbplikebox").css({right: -250, "top" : 100 })
md("#fbplikebox").hover(function () {
md(this).stop().animate({
right: 0
}, $dur);
}, function () {
md(this).stop().animate({
right: -270
}, $dur);
});
md("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div class="mdfbplikebox">
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
<!-- Thay chatbox của bạn vào đây start -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="270" height="305" src="http://www7.cbox.ws/box/?boxid=777495&amp;boxtag=spnyd1&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-777495" style="border:#ababab 1px solid;" id="cboxmain7-777495"></iframe></div>
<div><iframe frameborder="0" width="270" height="75" src="http://www7.cbox.ws/box/?boxid=777495&amp;boxtag=spnyd1&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-777495" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-777495"></iframe></div>
</div>
<!-- Thay chatbox của bạn vào đây End -->
</div>
</div>

2- Trường hợp click mới xuất hiện

<style type="text/css">
#gb{
position:fixed;
top:60px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:70px;
float:left;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt14aq_5cvWib5xmBryZ0z2VcwxA8IDMnKb7St_pAN4rLtkjA31sBiD1F4GjlIwZJ8OZFf0ENMz1NpC2VedSRxAYxVPkyKpCmQ-GbMEVXPR3YRkzyZ2NJE605GQdf73cm3kSmoheEjBE/s1600/chatbox.png) no-repeat;
}
.gbcontent{
float:left;
background:none;
padding:3px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 75-w) : moveGB(71-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">
<!-- Thay Chatbox của bạn vào đây Start -->
<iframe src="http://chatwing.com/chatbox/e6b653f5-b8c2-413b-af66-ffde1025d72b" width="200" height="350" frameborder="0" scrolling="0">Please contact us at info@chatwing.com if you cant embed the chatbox</iframe>
<!-- Thay Chatbox của bạn vào đây end --></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.ri</script>

Phần code bôi màu vàng là phần chatbox của bạn sau khi đã tạo được và đem thay vào đó.
Code thì cũng chả có gì mới mẻ chỉ kết cái tai chatbox mà post lên thôi.
Chúc các bạn vừa ý!

Nguồn http://thietkeweb.sieurephanthiet.com/