Cara Memasang Buku Tamu Melayang Disamping Kanan Blog

Kali ini kami akan share buku tamu yang melayang disamping kanan blog, bagi yang ingin melihat contohnya bisa di lihat buku tamu blog ini

Langkah - Langkahnya
1.Masuk ke situs ini http://cbox.ws
2.Lalu masuklah menggunakan Akun anda,atau yang tidak mempunyai akun silahkan di daftar
3.setelah anda Sign Up anda akan di suruh masuk ke Cbox
4.Kemudian klik PUBLISH!, ada di bagian atas untuk mendapatkan kode ChatBox anda
5.Kemudian anda copy HTML 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/AVvXsEh5mYIoUxOwR1uc1UpkpJocGI06hebv3_A3fS76kQVH__JJm_aUiZxlIitt7E17nQp9XYgvRv8iFfwvaAowtTtmOjFVFxrJOEdommwG1hU94kn4UnNAbEQ_eeJw4yN6vj_3HSsOgbtEALc/s1600/bukutamu.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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="275" src="http://www4.cbox.ws/box/?boxid=4236556&amp;boxtag=x6x3d2&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4236556" style="border:#ababab 1px solid;" id="cboxmain4-4236556"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4236556&amp;boxtag=x6x3d2&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4236556" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4236556"></iframe></div>
</div>
<!-- END CBOX -->

<div style="text-align:right">
<a href="http://another-blog99.blogspot.com/2013/09/cara-memasang-buku-tamu-melayang.html">[get this widget]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Note: tulisan berwarna biru adalah URL gambar , dan ganti yang berwarna merah dengan kode ChatBox anda



6.setelah di copy Masuk ke blogger blog anda
7.ke tata letak
8.klik add gadget atau tambah gadget
9.edit html/javascript
10.kemudian masukkan kode diatas tadi ......Dan SELESAI


Bagi teman-teman yang ingin menambahkan emoticon pada CBox sobat bisa dilihat disini