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:

  1. Kamu harus Masuk/Login dulu ke Blog kamu,
  2. Kamu pilih Rancangan,
  3. Kamu pilih Tambah Gadget,
  4. Kemudian kamu pilih HTML/JavaScript,
  5. 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/AVvXsEgVQGFX8HFaoD15ONmTq_9ix0fg45UpIq97T2FFA_Nuuwgk2yry4Ibfb7y5_WkLJ98lybJYsqoTRIpoba8aP_w-bk7DuO_mgwh_qUu4h1yt1n3iCm8yuJ99nQuZ_MLiqpQNY8PXhZ9qCYo1/') 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/AVvXsEgVQGFX8HFaoD15ONmTq_9ix0fg45UpIq97T2FFA_Nuuwgk2yry4Ibfb7y5_WkLJ98lybJYsqoTRIpoba8aP_w-bk7DuO_mgwh_qUu4h1yt1n3iCm8yuJ99nQuZ_MLiqpQNY8PXhZ9qCYo1/"/>
</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....

Tags : ,