Sunday, 9 September 2012

How To Add 1 Click Pop Up Chatbox To Your Blogspot

How To Add 1 Click Pop Up Chatbox To Your Blogspot

Hi! there today I will teach you "How to Add 1 Click Pop Up Chatbox" you will see a different chatbox style its different from my first tutorial and its easy to do that just a simple copy/paste to your HTML/JAVASCRIPT SLOT ok let's begin this tutorial.


NOTE:

If you dont have chatbox/cbox account you must register here http://www.cbox.ws/ and get the chatbox/cbox code.


1. First thing to do is Login to your Blogger Account.

2. The next one is go to Design > Add A Gadget > HTML/JavaScript and paste the code below dont put the title ok then hit SAVE.

3. Change the sample chatbox/cbox code into your new one.

4. Then see the result easy huh!.



 





<div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 14px;" onclick="togglecbox()">
<b>Open Cbox</b></div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 200px; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius: 3px;">
</div>

<script type="text/javascript">
var cbvis = false;
var cbload = false;
var cbcookie = "cboxvis=";

function togglecbox () {
var cbdiv = document.getElementById("cboxdiv");
var cbbut = document.getElementById("cboxbutton");

if (!cbvis) {
if (!cbload) {
cbdiv.innerHTML = '<iframe frameborder="0" width="195" height="80" src="http://www2.cbox.ws/box/?boxid=2109469&boxtag=5cbgr6&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-2109469" style="border:#636C75 1px solid;border-top:0px" id="cboxform2-2109469"></iframe><iframe frameborder="0" width="195" height="298" src="http://www2.cbox.ws/box/?boxid=2109469&boxtag=5cbgr6&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-2109469" style="border:#636C75 1px solid;" id="cboxmain2-2109469"></iframe>';
cbload = true;
}
cbdiv.style.display = "block";
cbbut.innerHTML = "Close Cbox";
}
else {
cbdiv.style.display = "none";
cbbut.innerHTML = "Open Cbox";
}
cbvis = !cbvis;
document.cookie = cbcookie+((cbvis)?1:0);
}
// Toggle Cbox open if it was previously
var cbcookiei = document.cookie.indexOf(cbcookie);
if (cbcookiei >= 0) {
if (document.cookie.substring(cbcookiei+cbcookie.length, cbcookiei+cbcookie.length+1) === "1") {
togglecbox();
}
}
</script>

Hope you like it my tuturial subscribe to my RSS FEEDS to receive new updates about blogger tutorials or follow us on twitter.

 

No comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...