Code Ẩn Hiện Chatbox Cho Blogspot

Code Ẩn Hiện Chatbox Cho 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
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/AVvXsEg_VZHwGzs8iLgLVBFjLGU7n131naMc98OeXN7TXO0uE_spvupAECw97jnW00e3n5T2tvCarQiKKrCGzkiE2KkuajIihpJMW-GBvQ35398mZNLcWmJITfbF-WxdiVyXhoLZ8Ja3qely64w/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>

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/AVvXsEg_VZHwGzs8iLgLVBFjLGU7n131naMc98OeXN7TXO0uE_spvupAECw97jnW00e3n5T2tvCarQiKKrCGzkiE2KkuajIihpJMW-GBvQ35398mZNLcWmJITfbF-WxdiVyXhoLZ8Ja3qely64w/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 đỏ  phần chatbox của bạn sau khi đã tạo được và đem thay vào đó.
Thế là xong, chúc các bạn thành công.

    Blogger Comment
    Facebook Comment

0 nhận xét:

Post a Comment