[Tips] Cara Membuat 'Buku Tamu Tersembunyi' pada Blog

Mungkin kebanyakan orang sudah memiliki blog, dan sudah mengetahui cara ini. Saya cuma mau share saja gimana caranya membuat 'Buku Tamu' tersembunyi pada blog. 'Buku Tamu' tersembunyi ini, dapat digunakan untuk chatting,
bahkan bisa digunakan sabagai buku tamu seperti buku absen di sekolah-sekolah. Unik bukan?? xD



Buku tamu ini tidak seperti buku tamu atau box chatting biasa, tempatnya tersembunyi (sesuai dengan namanya) untuk membukanya terdapat tulisan di sebelah kanan layar bertuliskan 'Buku Tamu'. Yah tombolnya seperti gambar dibawah :

Baiklah, berikut langkah untuk membuat 'Buku Tamu Tersembunyi' :

• Login ke akun blogspot
• Klik Rancangan/Design >> Page Element >> Add a Gadget >> HTML/Javascript
• Copy paste kan semua kode di bawah ini dan masukkan di dalam konten HTML/Javascript

  <style type="text/css">
  #gb{
  position:fixed;
  top:50px;
  z-index:+1000;
  }
  * html #gb{position:relative;}
  
  .gbtab{
  height:100px;
  width:30px;
  float:left;
  cursor:pointer;
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5W3veN8qak1He-Lj_VWOy6S_7H249-GqqZtVX-jJiWwZjJSqD8DnWvGVafzYFdcZ9LLMwnxKSw7tneakJtIGxpCTDiRw95vCh_69DFUyqHbndp0mvLTWI2gtwdMtru-kNECbVpxlEyDi/') no-repeat;
  }
  .gbcontent{
  float:left;
  border:2px solid #A5BD51;
  background:#F5F5F5;
  padding:10px;
  }
  </style>
  
  <script type="text/javascript">
  function showHideGB(){
  var gb = document.getElementById("gb");
  var w = gb.offsetWidth;
  gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
  gb.opened = !gb.opened;
  }
  function moveGB(x0, xf){
  var gb = document.getElementById("gb");
  var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
  var dir = xf>x0 ? 1 : -1;
  var x = x0 + dx * dir;
  gb.style.right = x.toString() + "px";
  if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
  }
  </script>
  
  <div id="gb">
  
  <div class="gbtab" onclick="showHideGB()"> </div>
  
  <div class="gbcontent">
  
  <--Kode CBOX-->
  
  <div style="text-align:right">
  <a href="http://cbox.ws">
  [Wants??]
  </a> by Abang <a href="javascript:showHideGB()">
  [Close]
  </a>
  </div>
  
  </div>
  
  <script type="text/javascript">
  var gb = document.getElementById("gb");
  gb.style.right = (30-gb.offsetWidth).toString() + "px";
  </script></div>

•  Ganti tulisan yang berwarna merah dengan kode Shoutmix atau Cbox teman-teman semua, tulisan hijau boleh diganti dengan link blog anda atau link cbox, dan tulisan berwarna orange bisa diganti dengan nama anda.
  
•  Jika sudah lalu klik save dan lihat hasilnya. 

Gimana?? Menarik dan membantu bukan?? :D 

Semoga bermanfaat yah... :D