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 thêm:



☼ 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://2.bp.blogspot.com/--1Cd1re0q84/UY-1EM6KY9I/AAAAAAAAAmU/_NautAuMmhI/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://2.bp.blogspot.com/--1Cd1re0q84/UY-1EM6KY9I/AAAAAAAAAmU/_NautAuMmhI/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é @!

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

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

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

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

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

☼ Kết luận

·        Tiện tích này quá đơn giản nên mình không DEMO ngoài chỉ để DEMO trực tiếp ở bài viết cho các bạn tham khảo.

·        Sử dụng các đoạn CSS và đoạn Scipts mở (chưa mã hóa - endcode) nên việc tùy biến rất dễ dàng.

·        Đẹp, gọn không chiếm diện tích nhưng vẫn dữ “được tính năng”.


Còn bạn muốn Support gì thì cứ để lại comment @!


Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

4 nhận xét: