Tutorial Membuat Widget Buku Tamu Melayang di Blog

Assalamualaikum, pada postingan saya kali ini, saya akan berbagi tutorial membuat buku tamu yang melayang di sisi kanan blog Anda. Oke, langsung saja kita mulai :D

1. Langkah pertama pergi ke Cbox atau situs penyedia layanan chat lainnya.
2. Lalu masuk akun Cbox Anda atau jika belum punya, silahkan daftar terlebih dahulu - Sign Up Cbox.
3. Jika Sudah mendaftar di Cbox, Anda akan diminta masuk ke situs Cbox.
4. Setelah masuk, edit/modif-lah Cbox yang akan Anda gunakan nanti atau biarkan seperti defaultnya.

 dan Langkah berikutnya Copy script HTML dibawah 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/AVvXsEgmRYPi1AleMS7YiAKsMl5khO00KR3eSyfzkfoXNgdCypCECjyPeWdXLvNBRKSObBGd0zmfeONnYPvWYV3k-Q_czpp9V6mZnHKWhrfmCZhGnewfYMEL2VgjBKeB3gIq7AZi5DRqjpWiDKM/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"> Silakan Pasang Script Code Cbox di sini
<div style="text-align:right">
<a href="http://jovanzers.blogspot.com/2014/07/tutorial-membuat-widget-buku-tamu.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></div></div>

Setelah itu ubah tulisan yang berwarna merah di atas dengan script kode Cbox yang telah Anda buat tadi. Kemudian Paste script HTML di atas pada blog Anda, dengan cara :

1. Masuk akun blogger Anda.
2. Klik bagian "tata letak".
3. Add gadget atau Tambah gadget.
4. Pilih HTML/Javascript
5. Kemudian masukan script kode HTML di atas
6. Simpan

Selesai. Demikian tutorial membuat widget buku tamu melayang di blog. :) 
Selamat Mencoba! Semoga Bermanfaat! :D 

Baca juga : Tutorial Membuat Widget Chatbox di Blog.