Memasang Buku Tamu Buka Tutup di Blog

Bingung harus menulis judul apa akhirnya keluarlah judul itu tadi. intinya saya ingin berbagi cara membuat atau memasang buku tamu yang lebih dikenal dengan shoutmix atau shout box yang buka tutup di kanan blog kita.

Buku tamu memiliki fungsi catatan dari pada pengunjung yang mampir di blog kita. biasanya pengunjung lebih tertarik menuliskan komentarnya di buku tamu dari pada menulisnya di kolom komentar di bawah postingan. jangan bingung ya akan saya sertakan gambar dibawah sebagai contoh buku tamu yang akan kita buat. hehe.menarik bukan.

bagi yang tertarik untuk memasangnya berikut tutorialnya :

Buku tamu (shoutmix)

• silahkan buat dulu buku tamu anda dengan klik disini
• lakukan proses registrasi (Sign Up) hingga dapatkan codenya. get HTML code (saya pikir tidak usah dijelaskan mengenai hal ini)
• log in ke akun blogger kalian
• pilih rancangan -- add gadget
• HTML / Java Script
• copy paste code di bawah ini
  
  

  <style type="text/css">

  #gb{

  position:fixed;

  top:100px;

  z-index:+1000;

  }

  * html #gb{position:relative;}

  .gbtab{

  height:100px;

  width:30px;

  float:left;

  cursor:pointer;

  background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;

  }

  .gbcontent{

  float:left;

  border:2px solid #A5BD51;

  background:#F5F5F5;

  padding:2px;

  }

  </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">

  
  TARUH KODE WIDGET SHOUTOXMU DI SINI
  
  

  </div>

  </div>

  <script type="text/javascript">

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

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

  </script>

NOTE : pada tulisan yang berwarna merah ganti tulisan tersebut dengan kode buku tamu (cbox) anda.

Selamat mencoba semoga berhasil. jangan lupa tinggalkan komentar jika anda kesulitan dalam membuatnya.