Artikel Curian

          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>
   #hcl {
   position:fixed;
   top:100px;
   left:0px;
   z-index:+1000;
   }
   * html #hcl {position:relative;}
   .hcltab {
   height:100px;
   width:30px;
   float:left;
   cursor:pointer;
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyWBzsQ65mZCvl_n6YkytMi7bhNsJClIvQn5_jbqPLoMLsB2CktketxwYLfwzKUAWt-jBTrF7GsCi1a0igAVDdSxKDlH_z4tjgFrzjgzPvurkl7oZXpA2zUt50NgCKZ6L69PwMSAvM60/s400/cbred-LEFT.png') no-repeat;
   }
   .hclcontent {
   float:left;
   border:2px solid #790909;
   background:#f3f6f7;
   padding:10px;
   }
   .hc-credit {font-size:9px}
   .hc-credit a {text-decoration:none}
   </style>
   <script type="text/javascript">
   function showHidehcl(){
   var hcl = document.getElementById("hcl");
   var w = hcl.offsetWidth;
   hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
   hcl.opened = !hcl.opened;
   }
   function movehcl(x0, xf){
   var hcl = document.getElementById("hcl");
   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   hcl.style.left = x.toString() + "px";
   if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="hcl">
   <div class="hclcontent">
   
   <!-- KODE SHOUTMIX ANDA DISINI -->
   
   <br />
   <div class="hc-credit">
   <span style="float:left">
   <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
   <a href="http://DOPIND.blogspot.com/2010/06/hidden-chatbox.html" target="_blank">
   Get this widget!
   </a>
   </span>
   <span style="float:right">
   <a href="javascript:showHidehcl()">
   [close]
   </a>
   </span>
   </div>
   </div>
   <div class="hcltab" onclick="showHidehcl()"> </div>
   
   </div>
   <script type="text/javascript">
   var hcl = document.getElementById("hcl");
   hcl.style.left = (30-hcl.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:100px;
   width:30px;
   float:left;
   cursor:pointer;
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtAGOeNvGUOs11F4JEkK8VVWzhKLeGfGPEEbOeXFQnwH6E4EWNpdUFAiJwnh3Lr4SGIk5Ydci8_LaXTYnlwM3voMarjnEW5DIhoRjYAYpSknvQ6o6vcW_QYdPhtKJsWu58Guj68UForUc/s400/cbblue.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 -->
   
   <br />
   <div class="hc-credit">
   <span style="float:left">
   <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
   <a href="http://DOPIND.blogspot.com/2010/06/hidden-chatbox.html" target="_blank">
   Get this widget!
   </a>
   </span>
   <span style="float:right">
   <a href="javascript:showHidehcr()">
   [close]
   </a>
   </span>
   </div>
   </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

SemoGa pOstinG Q kali ini berManfAat bagi semua yang liat postingku ini dan jangan lupa tinggalkan komentar.., byE..,