Hướng Dẫn Tạo Chát Box Cho Blogspot

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

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/AVvXsEi6QX2AU98BxpDyZ2FzhsFCyvcqf-ktMfbSK1eK2kSbvxJI0ER0_2yo9rAcODnzbE0PBIFb1d364ilxEURs5k2ZEdfNN5vpx45TWOY2MJiWIV83N8Xx7pxQXtyapqdvlgMLeDmuuvDnKks/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/AVvXsEi6QX2AU98BxpDyZ2FzhsFCyvcqf-ktMfbSK1eK2kSbvxJI0ER0_2yo9rAcODnzbE0PBIFb1d364ilxEURs5k2ZEdfNN5vpx45TWOY2MJiWIV83N8Xx7pxQXtyapqdvlgMLeDmuuvDnKks/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>

Tạo 1 tiện ích mới và các bạn dán code vào nhé.
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 ý!

Tag : Chát box, Thủ thuật blogger

tháng 7 01, 2017