How to Make Floating Chatbox

On the chance this time I will show how to make Chatbox drift. Chatbox is very popular because of its position that good and not make our blog slow.

Well, maybe not all the bloggers know how to make Chatbox like this. Therefore, I will share how to make this widget.

Okay, I immediately follow these steps:

First Steps
1. Click here

2. Click create shoutbox

3. Fill in the complete data format

4. If you have, click the Style & Colors

5. Edit as you please

6. If you have, Back to Home

7. Take the HTML code you are available

Okay you've done the first step, we proceed.

Second Steps

1. Login to blogger

2. Click Draft

3. Add gadgets

4. Select the HTML / Java script

5. Copy the HTML code below

 


Copy the HTML code below

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
background:#81BEF7;
)repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style=" background:-moz-linear-gradient(top, #051547, #999, #051547); color:#6cec17;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;"> Close </b></a></div>

Kode Chatbox Sobat

 
</td></tr></table>
</div>
<script src="http://kangdadang.googlecode.com/files/shouteffect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwKygKn-ZFq2ecFIx6IoFMlzw3jsufNj9tfq-ZWeqdKWeXDiZEwUGc4nwnOZ806hh4tNXGO2DcC_T8AvPJYrd1f376lzOFwEbh8g-_ZziwXzJxX629ya9sBLWbE7E08TIcHldxsSfQ14/s1600/TabGBcopy.png" />

</a>
</div>
<!-- End buktam -->

Note :  Put your chatbox code in the text area is Yellow, you can also change the icon image Chatbox to change my picture on the address marked in blue. Very easy is not it?

HOPEFULLY USEFULL...