Hide and Show ChatBox or ShoutBox

Hmm, Chat Box Ghost...
Most of people usually search this trick, but they search with many kind of keywords, hide show chatbox, make float cbox, floating cbox on right side, on sidebar, make hidden chatbox, and more...
They find a lot tricks in google, but almost of them tell you the tutorials to make Hide and Show ChatBox or ShoutBox Version 1.

The big difference between Hide and Show ChatBox or ShoutBox Version 1 and Version 2 is its appear. Just try and compare it yourself.

Let's make it :



1. Login to Dashboard and click on "Design". Then on "Page Elements", search place where you have put your ShoutMix or CBox Codes, click Edit.

2. If you haven't put your ShoutMix or CBox Codes,,, on "Page Elements", click on "Add a Gadget", a new small window will appear, choose "HTML/Javascript".

3. Paste the following code into 'Content' :

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; /* blogdotkop.blogspot.com */
right:0px; /* blogdotkop.blogspot.com */
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #232323; /* blogdotkop.blogspot.com */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#FFFFFF; /* blogdotkop.blogspot.com */
padding:10px; /* blogdotkop.blogspot.com */
padding-top:0px;
}
< /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><center>[ Close ]</center></b></a></div>

Put your ShoutMix or CBox Codes here

< /td></tr></table>
< /div>
< script type='text/javascript'>
//<![CDATA[
var gb_obj = document.getElementById("hidden_gb2");
var gb_finish = false;

function gb_setInitBehaviour(){
gb_obj.isHidden = true;
gb_setOpacity(gb_obj, "0.01");
}
function gb_setOpacity(obj, opacity){
opacity = opacity.substr(0, 4);
obj.style.opacity = opacity;
obj.style.filter = "alpha(opacity="+(Math.floor(parseFloat(opacity)*100)).toString()+")";
//writex(opacity);
}
function gb_showGB(){
gb_obj.style.display = "block";
gb_changeOpacityTo(1, "");
gb_obj.isHidden = false;
}
function gb_hideGB(){
gb_changeOpacityTo(0.01, "gb_obj.style.display = \"none\"");
gb_obj.isHidden = true;
}
function gb_changeOpacityTo(fin, funcStr){
var init = parseFloat(gb_obj.style.opacity.substr(0, 4));
var d = init <= 0.2 ? 0.04 : init <= 0.6 ? 0.08 : 0.20;
var m = fin>init ? 1 : -1;
var opacity = init + d * m;
if((fin-opacity)*(fin-init)<0){opacity = fin;}
gb_setOpacity(gb_obj, opacity.toString());
if(opacity != fin){setTimeout("gb_changeOpacityTo("+fin.toString()+", '"+funcStr+"')", 50);}
else{eval(funcStr);}
}
function gb_showHideGB(){
if(gb_obj.isHidden){gb_showGB();}
else{gb_hideGB();}
}
function writex(str){
document.getElementById("wx").innerHTML += str + " ";
}
gb_setInitBehaviour();
//]]>
< /script>

< div style="z-index:+5" class="gb_fixed">
< a href="javascript:void(0)" onclick="gb_showHideGB()">
< img border="0" src="http://i51.tinypic.com/2131wkl.png" />
< /a>
< /div>

4. Save, you are done.

The red text is the URL address of Chat Box image, try to change it with other image.

Now you've Chat Box Ghost like me, enjoy...

Source....http://blogdotkop.blogspot.no/2011/12/hide-and-show-chatbox-or-shoutbox.html