Cara Membuat Obrolan Tamu (Chat Guest) Disamping Kanan Layar

Obrolan tamu merupakan tempat untuk menaruh pesan singkat di blog anda ketika sedang ada yang berkunjung ke blog sobat. Obrolan tamu atau chat guest ini akan berada di samping kanan layar monitor sobat  yang akan terbuka jika ada yang klik gambar buku tamu tersebut. Langkah ini merupakan salah satu langkah dalam menghemat tempat di blog kita.

Membuat chat guest harus menggunakan jasa web yang menyediakan layanan chatting, sobat bisa mendapatkannya, salah satunya di Cbox. Dan ketika sobat sudah daftar di Cbox tersebut sobat akan memiliki kode buku tamu tersebut, Setelah anda memiliki kode buku tamu tersebut,
Langkah selanjutnya adalah :

1. Login di blogger sobat
2. Pilih Tata letak > Tambah Gadget > HTML/Javascript

3. Lalu Copy kode berikut dan Pastekan Pada kotak HTML/javascript tersebut

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:40px;
float:left;
cursor:pointer;
background:url('http://i1155.photobucket.com/albums/p556/Luthfi96/cooltext1895647497_zpsodmvrnkt.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</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">

< Letakkan disini kode Shoutbox Anda>

<div style="text-align:right">
<a href="http://lnk996.blogspot.com">
[Blogspot]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Keterangan :
 - Apabila sobat tidak suka dengan gambar chat guest di atas bisa menggantinya dengan mengganti tulisan berwarna merah (URL gambar ).
 - Ganti tulisan < Letakkan disini kode Shoutbox sobat> dengan kode script buku tamu sobat.

 4.Simpan HTML tersebut

 Selamat Mencoba & Semoga Bermanfaat ^-^