How to Make a Hidden Chat Box

Maybe you've never seen the chat box is hidden in some blogs. Where is the chat widget that will appear after it is clicked. Scripts used in the chat box is enabled. Javascript can indeed create great scripts and creative.

In this post you'll get a tutorial blog on how to make the chat box is hidden. Simply follow the tutorial below.


# Go to the bloggers.
# Select Layout (Layout) »Page Elements (Element page).
# Click on the text "Add a Gadget (Add Gadgets).
# Select the gadget HTML / JavaScript.
# Copy-paste the following code in the content.

<script type="text/javascript">
function showHidechat(){
var chat = document.getElementById("chat");
var w = chat.offsetWidth;
chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
chat.opened = !chat.opened;
}
function movechat(x0, xf){
var chat = document.getElementById("chat");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
chat.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
}
</script>
<div id="chat">
<div class="chat-click" onclick="showHidechat()"> </div>
<div class="chatbox">
<center>

SCRIPT CHATTING HERE
</iframe></center>
<a href="http://www.maniac-blogging.blogspot.com" title="Put chat widget like this on your blog" target="_blank">[+]</a>
<span style="float:right">
<a href="javascript:showHidechat()">
[x]
</a></span>
</div></div>
<script>
var chat = document.getElementById("chat");
chat.style.right = (30-chat.offsetWidth).toString() + "px";
</script>

# Save template

CSS
# Select the menu layout (Layout) »Edit HTML.
# Find this code ]]>, then copy-paste the following css code on it.
#chat{position:fixed; top:25px; z-index:+1000}

* html #chat{position:relative}

.chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}

.chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}

.chatbox a {text-decoration: none;}

# Save Template

You can change the image or color that is in blue writing on the suit.

Now look at the results. Good luck!