CARA HIDDEN CHATBOX

Assalamualaikum wr. wb.

hai sobat .
kali ini saya akan share cara HIDDEN CHATBOX

Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Contohnya seperti punyaku yang ada di sebelah kanan dan kiri., Manfaat dari Hidden Chatbox ini untuk menghemat template blog., Apakah kalian mau menggunakan cara seperti ini ? ya udah akan ku kasih tau caranya.
Caranya sebagai berikut :

1. Login ke Blogspot >> Rancangan >> Elemen Laman
2. Itu kan sudah langsung ke Elemen Laman terus Tambah Gadget >> Edit HTML/ Javasript
3. CopPas kode di bawah ini :Left Hidden Chatbox
   <!–left hidden chatbox / START –>

   <style>

   #hcr {

   position:fixed;

   top:100px;

   z-index:+1000;

   }

   * html #hcr {position:relative;}

   .hcrtab {

   height:96px;

   width:96px;

   float:right;

   cursor:pointer;

   background:url(‘http://web.bryant.edu/~alumni/2009images/june/Soccer_ball.png&#8217;) no-repeat;

   }

   .hcrcontent {

   float:right;

   border:2px solid #003e82;

   background:#f3f6f7;

   padding:10px;

   }

   .hc-credit {font-size:9px}

   .hc-credit a {text-decoration:none}

   </style>

   <script type=”text/javascript”>

   function showHidehcr(){

   var hcr = document.getElementById(“hcr”);

   var w = hcr.offsetWidth;

   hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);

   hcr.opened = !hcr.opened;

   }

   function movehcr(x0, xf){

   var hcr = document.getElementById(“hcr”);

   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

   var dir = xf>x0 ? 1 : -1;

   var x = x0 + dx * dir;

   hcr.style.left = x.toString() + “px”;

   if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);}

   }

   </script>

   <div id=”hcr”>

   <div onclick=”showHidehcr()”> </div>

   <div>

   <!– KODE SHOUTMIX ANDA DISINI –>
   

   </div>

   <br />

   <div>

   </div>

   </div>

   <script type=”text/javascript”>

   var hcr = document.getElementById(“hcr”);

   hcr.style.left = (30-hcr.offsetWidth).toString() + “px”;

   </script>

   <!– left hidden chatbox / END –>
   Right Hidden Chatbox
   
   <!– right hidden chatbox / START –>

   <style>

   #hcr {

   position:fixed;

   top:100px;

   z-index:+1000;

   }

   * html #hcr {position:relative;}

   .hcrtab {

   height:96px;

   width:96px;

   float:left;

   cursor:pointer;

   background:url(‘http://web.bryant.edu/~alumni/2009images/june/Soccer_ball.png&#8217;) no-repeat;

   }

   .hcrcontent {

   float:left;

   border:2px solid #003e82;

   background:#f3f6f7;

   padding:10px;

   }

   .hc-credit {font-size:9px}

   .hc-credit a {text-decoration:none}

   </style>

   <script type=”text/javascript”>

   function showHidehcr(){

   var hcr = document.getElementById(“hcr”);

   var w = hcr.offsetWidth;

   hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);

   hcr.opened = !hcr.opened;

   }

   function movehcr(x0, xf){

   var hcr = document.getElementById(“hcr”);

   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

   var dir = xf>x0 ? 1 : -1;

   var x = x0 + dx * dir;

   hcr.style.right = x.toString() + “px”;

   if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);}

   }

   </script>

   <div id=”hcr”>

   <div onclick=”showHidehcr()”> </div>

   <div>

   <!– KODE SHOUTMIX ANDA DISINI –>

   </div>

   <br />

   <div>

   </div>

   </div>

   <script type=”text/javascript”>

   var hcr = document.getElementById(“hcr”);

   hcr.style.right = (30-hcr.offsetWidth).toString() + “px”;

   </script>

   <!– right hidden chatbox  / END –>