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 by http://dopind.blogspot.com/ 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') 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 class="hcrtab" onclick="showHidehcr()"> </div>

   <div class="hcrcontent">

   
   

   <!-- KODE SHOUTMIX ANDA DISINI -->
   

   
   

   </div>

   
   

   <br />

   <div class="hc-credit">

   </div>

   </div>

   
   

   <script type="text/javascript">

   var hcr = document.getElementById("hcr");

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

   </script>

   <!-- left hidden chatbox by http://dopind.blogspot.com/ END -->

   
   
   
   
   Right Hidden Chatbox
   
   
   
   
   
   
   

   <!-- right hidden chatbox by http://dopind.blogspot.com/ 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') 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 class="hcrtab" onclick="showHidehcr()"> </div>

   <div class="hcrcontent">

   
   

   <!-- KODE SHOUTMIX ANDA DISINI -->

   
   

   </div>

   
   

   <br />

   <div class="hc-credit">

   </div>

   </div>

   
   

   <script type="text/javascript">

   var hcr = document.getElementById("hcr");

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

   </script>

   <!-- right hidden chatbox by http://dopind.blogspot.com/ END -->

   
   

Tulisan berwarna biru = Menunjukkan bahwa jarak tab dari atas
Tulisan berwarna biru muda = Tinggi dan lebar tab pembuka hidden chatbox
Tulisan berwarna kuning = Gambar yang dijadikan sebagai tab pembuka hidden chatbox