How To Create A Slide Out / Hiding Live Chat Box For Blogger

Views:

Dear Friends, Now i want to share about a slide out chat box for your blogger. Bloggers are really want a chat box to communicate with visitors. You can also share your thoughts, ideas etc via chat box. it make an online effect to peoples. All visitors can add their comment on chat box without any registration. Just provide your name and email address to share your chat. Few months back i also share a chat box application with Cbox. it is a clickable button to hide and open live chat . but that’s not working now because it shows some error on code. Because of that now i share a beautiful slide out chat box for blogger with Cbox support. You just need to start a Cbox account for using this chat option. If you want to add chat box option to your blog. Please follow this post carefully. Enjoy…

First go to Cbox.

Create a chat box in cbox. You can also change layout, font, width etc in dashboard.

After complete your edits . Save it.

Copy chat box code from cbox .

Then Log in your Blogger account.

Go to Page element option.

Click on Add a Gadget.

Select HTML/JavaScript option from given list.

Copy below code and paste it in to HTML/JavaScript box.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://www.use.com/media/2013/1111/3651488/thumbs/s_001.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

YOUR-CBOX-CODE-HERE

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Change RED color with your Cbox code, button image.

Save your Gadget.

Done.

Some Button Images below

Image 1

Image URL: http://www.use.com/media/2013/1111/3651486/thumbs/s_001.jpg

OR

http://lh3.ggpht.com/-bfqPf4ZpLZY/UoDIIqaE0EI/AAAAAAAAA98/1Hg8_2Qxn78/s1600-h/Livechatinternetexplora32.png

Image 2

Image URL: http://www.use.com/media/2013/1111/3651487/thumbs/s_001.jpg

OR

http://lh5.ggpht.com/-Papl4BGqylU/UoDINgWiuRI/AAAAAAAAA-M/6-7vWNXXXC4/s1600-h/Livechatinternetexplora42.png

Image 3

Image URL: http://www.use.com/media/2013/1111/3651488/thumbs/s_001.jpg

OR

http://lh6.ggpht.com/-YsqEITlJGL0/UoDIRF8NMfI/AAAAAAAAA-c/AbaLCNBMX5U/s1600-h/Livechatinternetexplora52.png

Image 4

Image URL: http://www.use.com/media/2013/1111/3651489/thumbs/s_001.jpg

OR

http://lh3.ggpht.com/-StpHqdYWz4o/UoDIVMBCpsI/AAAAAAAAA-s/bYd1oev81RM/s1600-h/Livechatinternetexplora62.png

Image 5

Image URL: http://www.use.com/media/2013/1111/3651490/thumbs/s_001.jpg

OR

http://lh4.ggpht.com/-rQ9JnlOJPrY/UoDIZoT5TsI/AAAAAAAAA-8/j337p84GzVM/s1600-h/Livechatinternetexplora72.png

Image 6

Image URL: http://www.use.com/media/2013/1111/3651491/thumbs/s_001.jpg

OR

http://lh5.ggpht.com/-HpqS2Tg5M6A/UoDIfZtz3AI/AAAAAAAAA_M/QMVYT52m2AA/s1600-h/Livechatinternetexplora82.png