Cara Memasang Buku Tamu atau CBOX Di Blog

ilustrasi

1. Login dulu ke akun blog anda
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.  
   
   
   <style type="text/css">
   #at{
   position:fixed;
   right:35%;
   z-index:+1000;
   }
   * html #at{position:relative;}
   .attab{
   height:0px;
   width:0px;
   float:top;
   cursor:pointer;
   background:url(url);
   }
   .atcontent{
   float:left;
   border:2px solid #fff;
   background:url(http://lh5.ggpht.com/_yF0--u7KSSI/TKgzluISmnI/AAAAAAAAAxE/PC55GBEXvig/kembangApi.gif)#000000 repeat-x bottom center scroll;
   -moz-border-radius:10px;
   padding:10px;
   }
   .atcontent:hover{
   border:2px solid #fff;
   background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
   }
   </style>
   <script type="text/javascript">
   function showHideAT(){
   var at = document.getElementById("at");
   var w = at.offsetWidth;
   at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
   at.opened = !at.opened;
   }
   function moveAT(x0, xf){
   var at = document.getElementById("at");
   var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   at.style.bottom = x.toString() + "px";
   if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="at">
   <div class="attab" onclick="showHideAT()"> </div>
   <div class="atcontent">
   <div align="center">
   <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">
   
   Strip kode cbox sobat
   
   </div>
   </div>
   <br />
   <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div></div></div>
   
   <script type="text/javascript">
   var at = document.getElementById("at");
   at.style.bottom = (-200-at.offsetWidth).toString() + "px";
   </script>
   
   
   Klik save / simpan.
   Keterangan:

   1. Kode warna merah adalah warna gambar, bisa di ganti dengan alamat gambar yang ingin anda pasang
   2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bisa di ganti penempatannya sesuai yang anda inginkan,
      BOTTOM = bawah ,  TOP = atas ,  LEFT = kiri , RIGHT = kanan
      
   3. Kode warna biru adalah jarak cbox dari sebelah kanan. bisa di sesuaikan sesuai selera
   4. Texts berwarna hijau adalah tempat untuk menaruh strip kode cbox anda (atur cbox anda agar backgroundnya Transparent untuk hasil yang lebih sempurna).

   Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)
   
   Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script
   
   <div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>
   
   

   Keterangan: 

   • Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
   • Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
   • Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTTOM dari bawah blog.

   
   
   
   
   
    Sumber: zuazz.blogspot.com