Membuat Buku Tamu Berada Di Samping

Assalamu Alaikum wr.wb. sobat bloger jumpa lagi bersama saya tentunya di dunia para bloger ... kali ini saya ingin berbagi pengetahuan kepada sobat-sobat sekalian tentang gimana sich cara memasang CBox atau populernya disebut Buku Tamu tepatnya di posisi samping blog yang kita punya...soalnya kebanyakan blog yang kita jumpai umumnya CBoxnya berada di area widget....daripada penasaran lebih Kita langsung saja ke 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/AVvXsEihklMU4vWhtWFCDpKKQJ7L3H5aRE1_muo2OrxCRdk23jXXxk0wxHmR0G348F0oVS3iDU2nox4F2KKg6IMbXEgEeZYYeQWDpG-1WK-lpluQiCgb0xwyWB6vmUfsJsFpTIZzx6tvMuXcmiCy/') 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://dsconline.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.