Tips animasi Blogging : Membuat Chatbox Show Hide

Setelah mencari-cari akhirnya ketemu juga deh... cara membuat chatbox show hide. setelah lama ngiri sama blog teman.. caranya gimana! akhirnya sekarang dah bisa buat chatbox yang beda sama blognya teman hehe..

Untuk membuat chatbox show hide sebenernya sih mudah
tinggal copast aja.... atau mungkin dikonfigurasi dikit juga tidak masalah. tapi juga ada syaratnya yaitu sudah daftar di situs penyedia widget chatbox seperti shoutmix dll.
Berikut ini adalah caranya :

1. Login Blog
2. Masuk ke Rancangan
3. Tambah widget ..
HTML/javascript1

Masukkan code dibawah ini :

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:201px; width:35px; float:left; cursor:pointer; background:url('http://2.bp.blogspot.com/_EW8LhmljFgI/TPaK7K2wxKI/AAAAAAAAAIA/G1Gac0K4M_M/s1600/Chatbox+copy.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">

<-=== Code Widget Shoutmix 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>  

nb : Untuk yang berwarna biru diganti dengan widget shoutmix anda.

Demikian Tips dari TheCrunzy........ 

Semoga sukses...

Artikel Terkait: