Cara Menambah Chatbox/Buku Tamu di Blog

Untuk menambah shoutbox, kita harus mendaftar di situs http://www.shoutmix.com/ agar kita bisa mendapatkan codenya.

Masuk ke situs shoutmix, klik Create Shoutbox.

Isi lengkap ID, Pass, Name & Email. Lalu klik Continue

Tunggu sesaat, shoutmix akan mengirim email ke email mu untuk verifikasi. Halaman akan redirecting otomatis ke halaman utama profil mu di shoutmix.

Lalu jika ingin langsung bisa copy code yang ada(bisa juga melalui get code), atau bisa juga kita edit di Style & Colors.

Ini gambar jika kita klik Get Code

Jika klik Style & Colors akan tampil halaman ini. kamu bisa memodifikasi warna sesuia keinginan.

Apabila telai selesai, copy code dan masukkan ke blog dengan mengklik tambah gadget. Kemudian paste & simpan.

Jika ingin membuat shoutbox kamu bisa tersembunyi. Gunakan code berikut:

<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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">

TARUH KODE WIDGET SHOUTBOXMU DI SINI

</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Teks berwarna biru adalah URL gambar. jadi kamu bisa menyesuaikan sendiri gambar yang diinginkan.
Teks berwarna merah ganti dengan code widget shoutmix.