Membuat Chat Box di Samping Blog

Ini merupakan salah satu request dari sobat blogger saya, yang mengatakan "Gimana caranya pasang ChatBox di samping, kaya di Blog kamu ini?" OK lah sob saya gak punya banyak prolog lagi, soalnya saya lagi sibuk banget dan koneksi juga lelet banget, kita langsung aja menuju TKP.

1. Pertama sobat login dulu ke Akun Blogger sobat.

2. Kemuadian ke Rancangan, tambah Gadget, HTML/Java Script dan copy paste kode di bawah ini :

<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/AVvXsEgXbRM5Wr1PF0XdyVgeBTsAHEkrR162nJZgjfWdGPHJz-Rf9x3-BcAQkhK4ul4hy9XeNspVwqn1bCoeH1Z4KqwC_tIZGA8blftM_dciivf-rzsM5BhylISqQxHp85jg3htf4roLJsYMIKXr/') 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://forantum.blogspot.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>

Catatan :

1. Ganti kode ini <!-- Ganti Kode ini dengan kode ChatBox sobat --> br/> dengan kode ChatBox sobat, yang sobat dapatkan dari situs terkait.

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

Baiklah untuk Thedy Mini Site, semoga artikel ini dapat membantu sobat, dan juga semoga dapat membantu sobat-sobat blogger lainnya. Silakan langsung di praktekkan sob. Semoga bermanfaat, salam .:: ashtho ::.