Cara Membuat Chat Box Di Samping Blog

Lansung saja ya menuju ke TKP.

Untuk Tutorial yang pertama adalah

1. Sobat login dulu ke akun Blogger.

2. Kemudian ke Rancangan.

3. Setelah itu sobat menambahkan Gadget, HTML/Java Scrip.

4. Masukkan / Copy Paste Code berikut ini. Kedalam HTML/Java Scrip

<style type="text/css">
#gb{
position:fixed;
top:50px;
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/AVvXsEgzum804_J8_Yo-Pekpk-zhezA5DdYwe6xkf7bXprKGjhvqHK82-2sPFEwlqefVrqY5kzbKlEM33D_U7ojJhXQ_tCRRph45NHApXodhQgztNy2F8i3IAK54g6mIDiDFrikTircDwcgeNf-d/') 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">
<!-- Ganti ini dengan kode buku tamu kamu --> br/>
<br/>
<a href="http://www.santozaq.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

5. Sobat harus mengganti code yang ber warna merah Ganti Kode ini dengan kode ChatBox sobat dengan kode ChatBox sobat, yang sobat dapatkan dari situs terkait.

6. Sobat juga bisa mengatur posisinya, tinggal mengganti Top-nya sesuai dengan keinginan sobat.