Buku Tamu Autohide

Membuat buku tamu dari CBOX sepertinya sudah biasa, tapi yang model Autohide kayaknya jarang dibahas para Master Blogger (atau saya yang masih awam...) apapun itu saya akan membahasnya disini.

Berikut langkahnya

1. Buka akun Blogger sobat
2. Masuk ke menu Rancangan/Design
3. Klik yang bagian Elemen Laman
4. Tambah Gadget Pilih HTML/Javascript
   
5. Masukkan Kode dibawah ini ke Gadget yang tadi
   

   <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/AVvXsEh5KSGYyjFUb-0ezRO6rY_THCPjMpklp06N_bWMOEJJR5BvxQX6f_40_t0FnvJJX4bp7SyTepG8N4Erb_E1O2U0AQLgnh7hYKKsqZ1l105JgC32iU4XV_jYvpxfnnbnl4AzwommuEhs4bI/s400/Guestbook.png') no-repeat;
   }
   .gbcontent{
   float:left;
   border:1px solid #f4f4f4;
   background:#f9f9f9;
   padding:5px;
   }
   </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">
   
   <!-- BEGIN CBOX - www.cbox.ws - v001 -->
   Isi Kode Cbox kamu disini
   <!-- END CBOX -->
   
   <br/>
   <br/>
   <a href="http://blogidinrohidin.blogspot.com">.
   </a>
   <div style="text-align:right">
   <a href="javascript:showHideGB()">
   [close]
   </a>
   </div>
   </div>
   </div>
   <script type="text/javascript">
   var gb = document.getElementById("gb");
   gb.style.right = (30-gb.offsetWidth).toString() + "px";
   </script>
   

6. Simpan pekerjaan Anda dengan mengklik Save
7. Lihat hasilnya

Demikian tutorial singkat ini semoga bisa menjadi Kreasi Sobat untuk membuat blog yang atraktif, jika masih belum mengerti silahkan tinggalkan komentar