Making Floating Chat Box in Blog

0 Comment

Today i will give you the way to make your own floating chatbox in your own blog.
This chatbox is useful for your visitors to provide comments and input on blogging. So that later you can improve your blog better.

To make chatbox code, visit this site. 
www.cbox.ws


Here is it :


  1. First, Open Design
  2. Add Gadget
  3. HTML/JavaScript

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

.gbtab{
height:125px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') no-repeat;
}
.gbcontent{
float:left;
border:0.5px solid #FFFFFF;
background:#000000;
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 CHATBOX CODE

<a href="">
</a>
<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>
Then click save.

Change the orange with your own image, or just leave it default.
Change the red with your chatbox code.

Hope this post is useful for you.
Happy Blogging :)
Description: Making Floating Chat Box in Blog
Rating: 5
Reviewer: FarZ
Item Reviewed: Making Floating Chat Box in Blog


Title : Making Floating Chat Box in Blog.
Original URL : http://farzc.blogspot.com/2012/03/making-floating-chat-box-in-blog.html
Label :

You can share this article: Making Floating Chat Box in Blog but do not forget to put the source link of Making Floating Chat Box in Blog.


Enter your email address to get updates from this blog:


Share this article :

Post a Comment

Please do not SPAM or commented by stating the link
If you cannot comment in English, use Indonesian :))

 
Copyright © 2011. FarZ Collection - All Rights Reserved
Proudly powered by Blogger