cara membuat menu hide and show chatbox pada blog

Itung-itung sharing pengalamanku yang susah alias gak sukses-sukses buat nambahin widget yang satu ini...hihihi :)

Buat yang mau bikin Chat Box Show Hide, biar lebih gaya meski dikit, ikutin tips di bawah ini: 

eits, tapi kamu harus punya account di shoutmix dulu...klik di sini  
kemudian ikutin aja petunjuknya...


Pada layout pilih page elements trus add a gadget pilih HTML/JavaScript 

kemudian masukkan 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 #000000; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#2f788b; 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">

klo udah selesai, masukan kode shoutmix chat-nya (admin pake shoutmix chat) :

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="200" frameborder="0"

title="yoyoyooy" height="350"

src="http://www6.shoutmix.com/?yoyoyooy">
<a href="http://www6.shoutmix.com/?yoyoyooy">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free

shoutbox chat widget at ShoutMix!">ShoutMix chat

widget</a><br />
<!-- End ShoutMix --></div></div>

Lalu tutup dengan kode dibawah ini :

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

selamat mencoba...... :))

wihhh...kita bisa saling chat nih sekarang ^_^