Cara Membuat Buku Tamu (Chat Box Versi 3)

Rabu, 10 Juli 2013

Cara Membuat Buku Tamu - Postingan sebelumnya saya sudah membahas tentang chat box juga dan kali ini saya akan membahas tentang chat box atau sering kita kenal buku tamu tetapi ini scriptnya tidak sama dan chat box ini adalah chat box versi ke-3 dari Laba-Laba Blog. Buku tamu atau chat box sangat berguna untuk blogger kita salah satunya adalah untuk memberikan sebuah pertanyaan-pertanyaan yang kurang jelas di blogger atau hanya sekedar untuk saling sapa dan saling mempromosikan bloggernya.

Ikuti langkah-langkah dibawah ini untuk membuat chat box (buku tamu) versi ke 3.

1. Masuk ke blogger.
2. Dari dasbor anda bisa cari tata letak.
3. Kemudian anda pilih tambahkan.
4. Cari html/javascript.
5. Salin kode atau script 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/AVvXsEhC6g_FZfiw90TUceB8Tn5ziQ8jZ7eLWu46C1K_oE9un2pS2msKGXmvHSPy7cOlZJvkV9zZ1yGwhJFKPhY4miLqYFqGBO8jw_W8PwFLSeJYB7kz5Oktf2S3ZLlVkh1edmLS4Bw_k_WMLtE/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">
Kode buku tamu
<div style="text-align:right">
<a href="http://abelavriyanno.blogspot.com/2012/04/cara-membuat-buku-tamu-melayang-di-sisi.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>

6. Simpan.
Keterangan: Tulisan yang di tandai dengan warna merah, anda bisa isi dengan kode buku tamu (chat box) yang anda miliki.