Aug 21, 2010

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!

2 comments:

jamesandy said...

Perhaps you've never observed the talk confine is concealed a few sites. Where is the talk gadget that will show up after it is clicked. Contents utilized as a part of the visit box is empowered. Do my Essays Javascript can for sure make extraordinary contents and inventive.

Stephen Merchant said...

Maybe you've never watched the discussion limit is hidden a couple of locales. Where is the discussion contraption that will appear after it is clicked. Substance used as a piece of the visit box is engaged. Javascript can for beyond any doubt make uncommon substance and imaginative. Help with Essay

Post a Comment