myoose-i-see
home about explore cliques graphics FAQS FOLLOW

CREDITS



[more]

Older Post > | < Newer Post
[Tutorial] How To Make A Hidden Chatbox
Monday, August 4, 2014 | 7:53 AM | 1 comments

Hi there yall! Today I'm going to post another tutorial how to make a hidden chatbox like mine! It's my new chatbox style tbh and I wasn't even planning on making the tutorial of how I did it if Sharon didn't ask me to!

So now let's begin this tutorial.

Copy and paste the code below in your HTML code area :



<!-- HIDDEN CHATBOX CODE START --!>
<style>
#cbox {
position:fixed;
top:50px;
z-index:+1300;
}
* html #cbox {position:relative;}
.cboxtab {
height:110px;
width:80px;

margin-left:-50px;
float:left;
cursor:pointer;
background:url('CBOX TRIGGER URL') no-repeat;
}
.cboxcontent {
float:left;
border:3px solid #000000;
background:#ffffff;
border-radius: 20px;

padding:8px;

}
</style>


<script type="text/javascript">
function showHidecbox(){
var cbox = document.getElementById("cbox");
var w = cbox.offsetWidth;
cbox.opened ? movecbox(0, 30-w) : movecbox(25-w, 0);
cbox.opened = !cbox.opened;
}
function movecbox(x0, xf){
var cbox = document.getElementById("cbox");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
cbox.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movecbox("+x+", "+xf+")", 8);}
}
</script>


<div id="cbox">
<div class="cboxtab" onclick="showHidecbox()">
</div>
<div class="cboxcontent">

CHATBOX CODE

</div>
</div>
<script type="text/javascript">
var cbox = document.getElementById("cbox");
cbox.style.right = (30-cbox.offsetWidth).toString() + "px";
</script>
<!-- HIDDEN CHATBOX CODE END --!>


Replace :
  • CBOX TRIGGER URL with the button URL which is used for showing your Cbox
  • CHATBOX CODE with your Cbox code
  • CODES IN PINK are the codes that can be customized by yourself as you want. It all depends on the look you want and your blog fits better.
Now save it and enjoy your new look! Hidden stuffs are very good to put on your blog cuz it makes your blog more interesting

If anyone gets trouble when following my tutorial, please comment on this post asap. I will help you to fix it.

Labels: ,