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>
   #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/AVvXsEhHg5XMY31lRb4_jbm2fLi9kUxoIv6sHfFOpig6u9nk9jNCJGFBj4YKiyolpgYgOtWCLdWZ4sTcOoXFs8ppukFlg0HmDiJACYNVVvle1ZJrAi1k0rBAjj8Yexo_LxRaw0mCZiG2-2ec84c/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/AVvXsEirl_fcMkD3CNQrGw_vW5rN6sYqLTPYnBzr64BuC1z_NuLf-cOvRk20wN4kqL4RR2dHMpgS5BcJwYsbYouAQiwVrC7VNXDCrA_h2Wf8FixCOWnapBUAV1pv_NwU72Z_vtPqnL5I-eF2oxg/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..,

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Hidden Chatbox. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://bungkaryo.blogspot.com/2012/03/hidden-chatbox.html" target="_blank">Hidden Chatbox</a>

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Hidden Chatbox