Cara membuat buku tamu/kotak pesan/shoutbox buka tutup disebelah kanan

Pada artikel sebelumnya kita telah membahas bagaimana cara membuat buku tamu, kotak pesan atau shoutbox. Silahkan anda cari didaftar isi diblog ini. bila anda belum memiliki shoutbox, silahkan daftar dulu disini. Dan bila anda sudah memiliki, ikuti langkah dibawah untuk mendesainnya ke kanan halaman
dengan tombol buka tutup.

Ada pun kelebihannya, yaitu membuat spasi pada halaman anda lebih kecil. Baik langsung aja, seperti yang saya katakan diatas, anda harus memiliki shoutbox terlebih dahulu. Jika sudah yakin langsung ikuti langkah dibawah ini..

1. Silahkan login terlebih dahulu diblog anda

2. pilih menu rancangan =>> Edit tata letak

3. buka "add widget" 

4. lalu copy-paste script code dibawah ini kedalamnya,

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:120px;
width:40px;
float:left;
cursor:pointer;
background:url('http://i299.photobucket.com/albums/mm308/willydachi/chat-box_zps6f9fdb1d.png')
no-repeat; }
.gbcontent{
float:left;
border:2px solid #444444;
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">
<center> Tempatkan disini script code dari shoutblox anda!! </center>
<div style="text-align:right">
<a><font size="1"">No SPAM..!!!</font></a><a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

5. Untuk code yang berwarna biru silahkan diganti dengan script code shoutbox anda sebelumnya

6. Setelah itu klik ok, lau simpan.

Bagaimana, mudah bukan?? Selamat mencoba..

Artikel Terkait