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
   
   
   
   <!--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 -->
   
   
   note:
   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 

   
   
   sumber:dopind.blogspot.com