Hide and Show Chatbox

Chatbox atau Guest Book berikut cukup menarik, karena tersembunyi di sebelah sidebar dan akan muncul ketika diklik tombolnya. Berikut caranya:

1. Login ke Akun Blogger
2. Daftar terlebih dahulu di cbox.ws
3. Tab Rancangan, Elemen Halaman
4. Tambah Gadget, HTML/JavaScript
5. Copas kode berikut:

<style type="text/css">
 #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; }
</style> <script type="text/javascript">
 function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }
</script>
<div id="hitsukeFX">
<div class="hitsukeFXtab" onclick="showHidehitsukeFX()">
</div>
<div class="hitsukeFXcontent">

MASUKAN KODE CHATBOX (CBOX, SHOUTMIX) DISINI

<div style="text-align: right;">
<a href="javascript:showHidehitsukeFX()"> [hide] </a> </div>
</div>
</div>
<script type="text/javascript">
 var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px";
</script>

Simpan deh..

Semoga Bermanfaat.