Cara Membuat Buku Tamu Auto Hide DiBlog Sebelah Kiri

"Cara Membuat Buku Tamu Auto Hide DiBlog Sebelah Kiri"

   Guest Book atau yang lebih dikenal adalah Buku Tamu Chat Box adalah tempat untuk pengunjung yang sedang online memberikan daftar hadir di sebuah situs / blog. Komponen dari buku tamu adalah dengan memasukkan nama, email, dan message (pesan) kepada pemilik blog.

   Buku Tamu ini sering dimanfaatkan untuk meletakkan url link menuju halaman website kita. Beragam Gadget dan Widget Guest Book tersedia di beberapa website yang menyediakan chat box menu secara gratis. Apabila anda belum memiliki guest book silahkan daftar terlebih dahulu di Shoutmix atau Cbox.

   Untuk menghemat ruang, guest book ini dapat disembunyikan di bagian scroll kiri kita. Jadi Buku Tamu tersebut tidak melayang di blog, tetapi akan dibuat auto hide dengan tombol click pada mouse. Berikut panduan pembuatan widget buku tamu tersebut.

Cara Membuat Buku Tamu Seperti Dibawah ini :

1.   Masuk ke www.blogger.com
2.   Pilih Layout / Tata letak > Tambah Gadget / Widget
3.   Klik HTML/Javascript
4.   Masukkan kode di bawah ini ke dalam kotak box tersebut.

  <!-- left hidden chatbox by http://kreasikita32.blogspot.com START -->
 <style> #hcl { position:fixed; top:135px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:30px; float:left; cursor:pointer; background:url('http://www.4shared.com/download/x85KBi--ce/image.jpg?lgfp=1000') no-repeat; } .hclcontent { float:left; border:4px solid #5F9EA0; background:#F5F5F5; padding:3px; } .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">

<div style="overflow:auto; padding:5px; width:100px; height:200px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">
 <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://kreasikita32.blogspot.com" num_posts="2" width="280"></fb:comments>
</div>
<div style="text-align: right; font-size: 10px;">
              Widget by
              <a href='http://kreasikita32.blogspot.com' target='_blank'>KREASI KITA</a>
          </div>


<br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->  </span> <span style="float:right"> <a href="javascript:showHidehcl()">  </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div>   <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- left hidden chatbox by http://kreasikita32.blogspot.com END --></div>

Atau Copas dibawah ini :

Code Buku Tamu kiri.txt


5.   Ganti tulisan <Letakkan disini kode buku tamu anda> (berwarna merah) dengan kode Guestbook yang anda buat di Shoutmix atau Cbox.ws tadi.
6.   Simpan Template.

Notes :

• Pada Teks yang berwarna hijau anda bisa mengubah height width sesuai keinginan anda.
• Pada Teks yang berwarna merah isi dengan code yan anda inginkan.
• Jika anda ingin mengetahui warna dengan terjemah codenya silahkan baca Kumpulan Terjemah Warna Kedalam Code

   Buku tamu tersebut sudah terpasang rapi dan lebih optimal di blog anda. Semoga dapat bermanfaat. Jika ada yang masih belum paham silahkan berkomentar.

  Demikian artikel mengenai "Cara Membuat Buku Tamu Auto Hide diBlog Sebelah Kiri". Jika anda berminat membuat Buku Tamu sebelah kanan baca artikel Cara Membuat Buku Tamu Auto Hide Diblog sebelah kanan

   semoga artikel ini bisa membantu dan bisa bermanfaat untuk kita semua...

"Terima Kasih"