Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

 

Siang sob, sebuah buku tamu / cbox sangatlah penting pada sebuah bloh ataupun website. nah kali ini saya akan membagikan postingan blog Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. ada yang tau apa itu CBOX ??CBOX ialah struksur script yang disediakan oleh CBOX.com dimana kita dapat menggunakannya secara gratis dan tinggal registrasi.sesuai dengan postingan cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.cukup menraik bukan ??

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:

1.     Seperti biasa sobat harus Login dulu di akun blog sobat
2.     Pilih Tata Letak
3.     Tambah Gadget HTML/Java Script
4.     Selanjutnya copy paste 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRiZqS_FQSY-UKwAJJDLpu6trxSiJgNNJA2iw-tFoDNQk4WPXBKRYPRj2U4Md1DGBzP2ChzsYInuo6NDjLn55uMLrE5adGjIHZFz2sdM8N4wlff-Huzq8tqwOmVzyB7M_nes-GzxRm3Ct/)#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, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya.
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adalah tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Langkah selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGPpxLKYfRx7neR2N35_lhHy420qINpBcDOqJaXRLZO45bkLAtVMtzf-CV6_Iz8UCbLlvNB6QliAl44oXeTD3lq0_z37-AkwUMAua7kl4viCao0mkjihm4Qa-FtoHNdQpKGiIZmf2K3ImV/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>
   

3. Klik save / simpan

 Keterangan dari tombol CBOX:

1.     Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
2.     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.
3.     Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Sekian dulu Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah, sobat bisa mempraktekan atau menggunakan widget ini.
Semoga Bermanfaat,