Cara Membuat Buku Tamu / Chat Box
Saya akan mempostingkan bagaimana cara membuat buku tamu yang
keluar masuk, atau ingin yang lain, saya sedang baik jadi saya postingkan dua sekaligus. Ada lagi yaitu yang
muncul dan menghilang. Baiklah langsung saja jangan lama2, ini dia saranya:
- Kamu harus Masuk/Login dulu ke Blog kamu,
- Kamu pilih Rancangan,
- Kamu pilih Tambah Gadget,
- Kemudian kamu pilih HTML/JavaScript,
- Dan kamu salin kode dibawah ini, tapi pilih salah satu, karena ada dua type:
1. Type Keluar masuk
<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/AVvXsEiaUlX0eIIhYKWROnA0sK8wEIHEOVY-L5ZGD3ls6VuhpuNteYsePphs0_n6PDOslftl8sJX9r8g7Kqfh5x_M4GHZ0L85nLZx0u72HxycdPZTrxKk5Ytz0-Nl-DYVJL9CodRZVMMFG98MlG2/') 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">
***Masukan Kode ShoutMix Atau ChatBox Kamu Disini***
<div style="text-align:right">
<a href="">
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
--------------------------------------------------------
2. Type menghilang
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:
1px solid
#004831;
background
:#00fcefff;
padding:5px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)"
onclick="gb_showHideGB()"><b style="color:red">[ Tutup
]</b></a></div>
***Masukan Kode ShoutMix Atau ChatBox Kamu Disini***
</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUlX0eIIhYKWROnA0sK8wEIHEOVY-L5ZGD3ls6VuhpuNteYsePphs0_n6PDOslftl8sJX9r8g7Kqfh5x_M4GHZ0L85nLZx0u72HxycdPZTrxKk5Ytz0-Nl-DYVJL9CodRZVMMFG98MlG2/"/>
</a>
</div>
Keterangan: Tulisan berwarna
Hijau adalah tempan kamu masukan code ShoutMix Atau ChatBox kamu. Yang berwarna
merah diatas adalah kode warna body tempan untuk ShoutMix Atau ChatBox kamu. Dan Warna
Biru muda
adalah warna gambar untuk tombol keluar masuk link gambarnya bisa anda
ganti dengan link yang anda mau. dan Yang saya blok dengan
warna kuning tua adalah tebal garis tepinya bisa di ubah angkanya
px nya si tetap.
Saya sudah coba semuanya dan bisa. kedua Java Script diatas bisa di gunakan semua, tinggal bagai mana anda sendiri melakukanya.
Selamat mencoba.... 
