Pasang Buku Tamu Di Sisi Kanan Blog

Kali ini saya mau share tutorial cara membuat buku tamu di sisi kanan.

Sebelum masuk ke tahap Pembuatan , silahkan kunjungi cbox.ws , login menggunakan ID sobat, jika belum mempunyai Account silahkan register, setelah register sobat klik menu Publish nanti akan nongol tuh code scriptnya..

Baru setelah dapat code dari cbox.ws ikuti tutorial berikut :

1. Login ke blogger.com

2. Pilih Tata Letak => add Gadget 

3. Pilih HTML/Javascript 

4. Copy kode berikut

<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/AVvXsEifkNt9xip-EmDl5AZyiSK6yUTbdd79xUHMQMtdbfvVBGCBneXePgwJfbvjbaj6VS3yKtAtoqUlHb2BSCu80jMt78f90uNP_z_B-Ruh6eNOd25hIJin75slCqlpx9Z5xz9XoR6u86G-dns/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">
Masukkan Code Buku Tamu Sobat Disini


<div style="text-align:right">
<a href="http://erdie-blog.blogspot.com/2014/04/pasang-buku-tamu-di-sisi-kanan.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>

Kemudial klik simpan.

Ok sekian dulu ya tutor nya :) terimakasih telah berkunjung.