Cara Memasang Buku Tamu / CBOX

Tutorial cara memasang buku tamu chatbox cbox di blog berikut bisa diterapkan di blogspot, wordpress, ataupun blog flatform lainnya karena sama-sama mengcopy paste kode HTML ke blog baik di sidebar ataupun dihalaman postingan.

Meskipun di blog sudah disediakan kotak komentar, ada kalanya pengunjung hanya ingin meninggalkan jejak bahwa dia sudah/pernah berkunjung ke blog kita. Biasanya para blogwalker yang rajin mengisi buku tamu chatbox ini saat



Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.
Kali ini saya akan memposting 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.


Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:
Seperti biasa sobat harus Login dulu di akun blog sobat
Pilih Tata Letak
Tambah Gadget HTML/Java Script
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjes4MoAKg5QeJXlssZOAbcxOGxIsTjNc56JEbAkBSMh2gIFRsqB9iGHCAPj7nK_HmfFYR4EsZ7pFXedpO-8y_DoKil6z0PEss0vTFfwBIuoqJBkKHUfY7_LhekyI4mk2TG9QCjLfGCeG2q/)#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>

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

Tetap login di akun blog sobat
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/AVvXsEifh7t8kvScve1PXbQez0BnM8ni1kTirj98DM86FRb4K3OD1-C25nD0VgrZiCqC7zIdA8XSSZ7IKaYtJrswshyphenhyphenvqyjMPd68wcZgT8nbeqQYSXtdtF1VF0YgqaXGL3r9H7uQhSfUaO7UxFI8/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, BOTOM dari bawah blog.
Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.