HIDE AND SHOW SHOUTMIX

Kali ini saya mau posting tentang bagaimana caranya membuat kotak shoutmix atau chat dapat di hide dan show. wah...pasti para blogger jadi bingung maksudnya gimana, begini biar lebih mudah lihat saja contoh shoutmix yang ada di blog ini. nah...udah liatkan, lalu sekarang bagaimana cara bikinnya. so to the point saja, begini caranya :
1. Sign in ke blog kamu
2. Di bagian dasbor klik Tata Letak
3. Tambah Gadget
4. Pilih menu HTML ( Script Java )
5. Lalu copy paste kode berikut ini :


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

6. Masukkan Kode shoutmixmu pada
<!-- Kode Shoutmix mu Disini -->

7. Lalu copy paste kode berikut dibawahnya :

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

  
8. Simpan dan selesai.

Artikel Terkait: