Membuat Buku Tamu Buka Tutup

Pernah liat chat box buka tutup seperti ini ? Chatbox adalah media yang memudahkan kita untuk berinteraksi dengan para pembaca.

Dulu sudah ada shout mix sebagai penyedia layananya, namun sekarang shoutmix tidak gratis lagi sejak negara api menyerang, alias berbayar.

Nah solusinya adalah cbox, dengan cbox kita dapat memperoleh sebuah chatbox seperti dulu baik yang gratis maupun yang berbayar.

Oiya buku tamu yang kita buat ini bentuknya buka tutup, jadi akan terus muncul dihalaman muka. Bentuknya yang buka tutup dapat memudahkan kita untuk menghemat tempat. Selain itu kita juga dapat menambah smileys yang ada pada cbox tersebut.

Silahkan di coba dan diotak-atik sendiri !


1. Daftar dulu ke Cbox > www.cbox.ws

2. Setelah daftar atur tampilannya dengan klik style atau look or feel
3. Setelah gayanya kamu atur, kamu bisa klik publish untuk mendapatkan emmbed code cbox mu.
4. Copy dan simpan kode yang didapat. 

Cara memasang di blogger :

• Login Ke Blogger
• masuk ke bagian tata letak
• Klik tambah gadget 
• pilih Html/Javascript
• lalu copy dan pastekan kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:100px;
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/AVvXsEimm_HbGg9Oe91ApZrkSHpL1fCKRNfyY3KGmhEyxq00FzCjEkYPHzQEjV3IhqSh-04qH3IOkQE9AJ04Zbc226QZJGD0SLZGMfkgG5l-bqg3QKYlcJtV97lHDKBy_7a2brk63R0wmAGoXE2V/s1600/buku+tamu.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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">

TARUH KODE WIDGET Chat Box Mu DI SINI

</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

*nb

• Pastekan embed code cbox mu di "TARUH KODE WIDGET Chat Boxmu DI SINI
• Klik Simpan Jika Sudah Selesai.