Cara Membuat ShoutBox Tersembunyi di Blog

Melanjutkan postingan sebelumnya mengenai "Beberapa Situs Penyedia Layanan ShoutBox Gratis", ada satu cara unik untuk meletakkan ShoutBox pada blog yaitu membuat ShoutBox tersebut tersembunyi disamping kanan layar monitor, yang mana apabila di klik, ShoutBox tersebut akan muncul dan apabila di klik lagi, maka ShoutBox tersebut akan kembali lagi ke asalnya yaitu tersembunyi di kanan layar monitor.

Nah, bagaimana cara membuatnya ?

Sebelumnya kamu harus punya dulu sebuah ShoutBox, kalau belum punya daftar dulu di situs penyedia layanan ShoutBox (baca: postingan saya sebelumnya).

Langkah memasangnya di Blogger.

Masuk kebagian "Rancangan" -> "Elemen Laman" -> klik "Tambah Gadget" terserah yang mana saja -> cari dan pilih yang bernama "HTML/JavaScript

Copy Paste kode html dibawah ini ke dalam kotak form html tersebut, selanjutnya masukkan kode html ShoutBox kamu ke dalam kode html tadi, ganti kode yang berwarna biru tersebut dengan kode ShoutBox kamu, tidak perlu diberi judul.

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i846.photobucket.com/albums/ab26/arifins/bukutamu.gif') 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">


<div style="text-align:right">
<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>
</div>

Terus klik "Save" atau "Simpan"
Sekarang coba lihat blog kamu.

Ket: Kode yang berwarna merah adalah alamat url gambar (lihat gambar dibawah) bisa diganti dengan gambar lain, dengan cara diganti alamat url tersebut dengan alamat url gambar yang kamu punya.