Membuat Show/hide ChatBox

         Sesuai dengan janjiku di postingaku sebelumnya, kali ini aku akan membahas cara membuat show/hide chatbox di blog. Agar blog anda lebih menarik, bisa anda tambahkan animasi show/hide chatbox ini untuk mempercantik blog anda. Animasi ini saya ambilkan dari punyaku sendiri.

         Langkah-langkah membuat animasi show/hide tanpa di klik :

• Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".
• Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
• Design/Rancangan : Cari dan klik "Edit HTML".
• Edit HTML : Amankan template terlebih dahulu (back-up templates).
• KLIK Download Template Lengkap.
• Simpan file Template di folder PC.
• Kembali ke halaman "Edit HTML" 

  5.  Cari kode shatbox yg anda dapatkan dari shoutmix/cbox

       (didalam gadget HTML/JavaScript)

  6.  Lihat Script code css di bawah ini :

Code CSS HTML

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


(GANTI DENGAN KODE HTML SHOTMIX/CHATBOX ANDA) 


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

 7.  Gantikan tulisan berwarna biru dengan kode html shoutmix/cbox anda

 8.  Klik simpan

Selesai

Selamat mencoba dan semoga berhasil !!!