Thêm Pop Out Chat Box (Cbox) cho blogspot (Blogger)

Khi các bạn đã tìm biểu thủ thuật “Pop Out Chat Box (Cbox) cho blogspot” đồng nghĩa với bạn đã biết cách đăng ký Chat Box, sử dụng Chat Box, cách chèn Chat Box,… Và tầm ảnh hưởng của Chat Box tới Blog/Website của bạn.

Nhưng việc thêm hộp Chat Box này vào Blog/Website của bạn nó lại chiếm quá “nhiều diện tích”. Chính vì đều này mà hôm nay Windows2it sẽ hướng dẫn cho các bạn thêm hộp Chat Box này vào Site của bạn chiếm 1 một diện tích nhỏ nhất mà vẫn dữ được “tính năng” của nó. Thủ thuật này có tên POP OUT DẠNG TRƯỢT (Ẩn/hiện Chat Box). Với 2 kiểu float left và float right

☼ Cách tiến hành:

Chỉ cần chèn đoạn mã sau đây vào một Widget HTML/Javascript là Oke

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

1. Kiểu float right

Thêm Pop Out Chat Box (Cbox) cho blogspot float right

<style type="text/css">
#gb{
position:fixed;
top:90px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPJ9maWzGSPt9sUcEpVFsNOm70nIugXNOtmmgHAw_z1_5BUrd6xzwoY_HYtAN-oLn1_mnXPvQq2XjXeVR0Ys1eqWd-PqWCIBZvKg8CBigTqyvfnYC_KS6p6DD3lSN8inquHtbtd0w0ps/s1600/Chatbox_left.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #990000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-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>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0; line-height: 0;">
<div style="position: relative; height: 300px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#ababab 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3485200&boxtag=80xag5&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3485200" id="cboxmain3-3485200"></iframe></div>
<div style="position: relative; height: 80px; overflow: hidden; border:#ababab 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3485200&boxtag=80xag5&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3485200" id="cboxform3-3485200"></iframe></div>
</div>
<!-- END CBOX -->


<br />
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Hide]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

2. Kiểu float left

Thêm Pop Out Chat Box (Cbox) cho blogspot float left

<style>#hcl {position:fixed;top:40px;left:0px;z-index:+1000;}* html #hcl {position:relative;}.hcltab {height:100px;width:30px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPJ9maWzGSPt9sUcEpVFsNOm70nIugXNOtmmgHAw_z1_5BUrd6xzwoY_HYtAN-oLn1_mnXPvQq2XjXeVR0Ys1eqWd-PqWCIBZvKg8CBigTqyvfnYC_KS6p6DD3lSN8inquHtbtd0w0ps/s1600/Chatbox_left.png') no-repeat;}.hclcontent {float:left;border:2px solid #23aae2;background:#f3f6f7;padding:10px;}.hc-credit {font-size:9px}.hc-credit a {text-decoration:none}</style><script type="text/javascript">function showHidehcl(){var hcl = document.getElementById("hcl");var w = hcl.offsetWidth;hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);hcl.opened = !hcl.opened;}function movehcl(x0, xf){var hcl = document.getElementById("hcl");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;hcl.style.left = x.toString() + "px";if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}}</script><div id="hcl"><div class="hclcontent">

<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0; line-height: 0;">
<div style="position: relative; height: 300px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#ababab 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3485200&boxtag=80xag5&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3485200" id="cboxmain3-3485200"></iframe></div>
<div style="position: relative; height: 80px; overflow: hidden; border:#ababab 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3485200&boxtag=80xag5&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3485200" id="cboxform3-3485200"></iframe></div>
</div>
<!-- END CBOX -->

<br /><div class="hc-credit"><span style="float:left"><!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --><a href="http://www.windows2it.com/2015/09/them-pop-out-chat-box-cbox-cho-blogspot-blogger.html" target="_blank">Get this widget!</a></span><span style="float:right"><a href="javascript:showHidehcl()">[close]</a></span></div></div><div class="hcltab" onclick="showHidehcl()"> </div></div><script type="text/javascript">var hcl = document.getElementById("hcl");hcl.style.left = (30-hcl.offsetWidth).toString() + "px";</script>

☼ Tùy chỉnh

· Thay đoạn Code màu Vàng thành đoạn Code Chat Box (Cbox) của bạn (bạn tùy chỉnh chiều cao và chiều rộng hộp Chat Box trực tiếp ở đoạn Code này luôn nhé !)

· Thay đổi link ảnh màu đỏ thành link ảnh bạn mong muốn, dưới đây mình cũng sưu tâm một số ảnh thích cái nào thì tải về upload lên, rồi lấy link hình thay vào lưu lại là oke nhé @!