Sabtu, 03 November 2012

How to Create Chat Box in the Upper Right Corner

Time to share again and again from my mind. He he he.. Sorry for my bad english. Ya namanya juga masih belajar cuma bermodalkan nekat dan nulis di blog sendiri juga. :p (Yes, i'm still learning and just capitalize reckless then write on my own blog. :p). In this time, i will to explain you "How to Create Chat Box in the Upper Right Corner". Base on my experience, cieee experience meni gaya.. wkwkwkw. Lets get started






1. First, add this code to gadget HTML/Javascript in the blogger.

<style type="text/css">
#gb{
   position:fixed;
   top:50px;
   z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
   height:100px;
   width:30px;
   float:left;
   cursor:pointer;
   background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
   float:left;
   border:2px solid #A5BD51;
   background:#F5F5F5;
   padding:10px;
}
</style>

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

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- your Chat Box HERE -->

<!-- end Chat Box -->

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


2. Second step, you are create your own Chat Box. For example : check this link
http://www.cbox.ws/
Just sign up, then get your free Cbox.


After you get the code, then paste into the code above after your Chat Box HERE before end Chat Box. Tralalaaa, your own CBox in the upper right Corner just created. Waduh, parah pisan bahasa inggris nya. Kalo ada yang bisa review postingan blog ini dan ngasih saran untuk kata-kata yang lebih baik, saya akan sangat appreciate sekali dengan anda. Cukup email kan atau komentar dibawah. Mari kita belajar sama-sama, saya ada ilmu lebih kita bagikan dan pelajari sama-sama, Anda ada info mari kita rundingkan bersama-sama juga. :)


0 komentar: