Membuat Hide dan Show Chat Box di Blog

            Di postingan yang dulu udah pernah saya bahas tentang bagaimana cara membuat chat box. Dan sekarang saya kasi 1 trik lagi nih yaitu Hide dan Show Chat Box. Kenapa hide n show??? karena dengan teknik ini sobat blogger dapat membuat Chat Box tersembunyi, pokoknya keren banget. Hehehe. Artikel tentang membuat hide dan show chat box ini di request oleh salah satu sobat blogger, buat yang sudah merequest, harap perhatikan dengan baik dan jangan bercanda yah. Okeii pak guru,, Heheh

1. Pertama, silahkan sobat login ke akun sobat blogger masing-masing.
2. Di bagian dasbor klik menu tata letak.
3. Tambah Gadget
4. Kemudian Copy-Paste kode berikut di gadget baru yang telah anda buat tadi.

<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com -- http://www.remo-xp.com--> <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"> <!-- Kode Shoutmix mu Disini -->

MASUKAN KODE 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>

5. Klik Simpan
6. Selesai