Home » , , » How to Make Floating Chatbox

How to Make Floating Chatbox

Written By DifAfif on Kamis, 27 Oktober 2011 | 19.11















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="http://1.bp.blogspot.com/_xTRukLv_HsA/TSkB3V90sfI/AAAAAAAAAJ4/fi1v8H-DUHY/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...
Share this article :

0 komentar:

Posting Komentar

Sample Text

Text Widget

Followers



 
Support : Your Link | Your Link | Your Link
Copyright © 2013. DifAfif - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger