Cara Membuat Buku Tamu Melayang Diblog

 Saya sering melihat blog seseorang, mereka menambahkan sebuah kotak yang berisi pesan dari banyak pengguna internet (biasanya blogger) yang bertujuan untuk blog walking. Gadget tersebut ada yang menyebutnya Chatbox, Guestbook/Buku tamu, Shoutbox, dan lain sebagainya. Gadget ini biasanya digunakan untuk bisa berinteraksi dengan admin blog saat si admin online atau hanya sekedar meninggalkan pesan. Ini berguna agar si pembaca bisa mengutarakan kritik dan saran mereka, dsb.

Ada 2 provider Chatbox yang paling sering digunakan seperti CBox (cbox.ws) dan shoutMix (www.shoutmix.com) namun disini saya menggunakan Cbox sebagai chatbox yang saya gunakan.

1.    Anda harus mendaftar terlebih dahulu, masuk ke http://cbox.ws/ dan klik pada tab sign up.

2.    Masukkan e-mail blog anda, password, dan URL blog anda. centang pada box "I Have Read the terms..." dan klik Get my Cbox!

      3. Anda akan diarahkan ke page bahwa anda sudah terdaftar. kini anda bisa login dengan cbox name dan             password yang telah digunakan

4.    Anda akan masuk ke Control panel akun anda. Untuk mendapatkan kode HTML cboxnya, klik Publish!.

5.    Copy kode HTML yang disediakan pada page Code Generator.

Sekarang anda tinggal membuat gadget baru di blog anda.

 1.    Login ke Blogger anda.

 2.    Pada dasbor, pilih Tata Letak.

3.    Klik Tambah Gadget sesuai posisi

4.    Pilih HTML/Javascript

5. Copy code dibawah ini    <style>

#hcl {

position:fixed;

top:40px;

left:0px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {

height:150px;

width:43px;

float:left;

cursor:pointer;

background:url('http://i1134.photobucket.com/albums/m609/bagongteknik/BukuTamuBTScopy.png') no-repeat;

}

.hclcontent {

float:left;

border:2px solid #23aae2;

background:#f3f6f7;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

</style>

<script type="text/javascript">

function showHidehcl(){

var hcl = document.getElementById("hcl");

var w = hcl.offsetWidth;

hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);

hcl.opened = !hcl.opened;

}

function movehcl(x0, xf){

var hcl = document.getElementById("hcl");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

hcl.style.left = x.toString() + "px";

if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}

}

</script>

<div id="hcl">

<div class="hclcontent">

---------------<Masukan kode cbox sobat disini>------------------

<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<a href="http://kangulien.blogspot.com/2013/12/cara-membuat-buku-tmu-melayang-diblog.html" target="_blank">

GETMORE

</a>

</span>

<span style="float:right">

<a href="javascript:showHidehcl()">

[close]

</a>

</span>

</div>

</div>

<div class="hcltab" onclick="showHidehcl()"> </div>

</div>

<script type="text/javascript">

var hcl = document.getElementById("hcl");

hcl.style.left = (30-hcl.offsetWidth).toString() + "px";</script>

6.    Beri judul misalkan "Buku Tamu" atau sesuai selera.

7.    Ganti kode yang berwarna merah dengan Kode cbox sobat

8.    Jika Selesai klik Simpan.

Kini anda sudah mempunyai kotak chatbox dari Cbox.ws di blog anda.

semoga bermanfa'at