Mengubah Tampilan ShoutBox Menjadi Hide/Show(Slide)

oke kali ini saya akan memberi trik bagaimana supaya posisi shoutbox anda menjadi hide/show(slide). contohnya seperti yang anda lihat di blog saya, coba anda perhatikan shoutbox yang saya gunakan.... ada yang aneh?? ya shoutbox-nya berada di posisi kiri, dan ketika di klik "sreg" shoutbox nya menggeser.. hehehe anda ingin tahu bagaimana caranya?? ikuti saja trik trik nya....

1. pertama masuk ke elemen laman/layout
2. lalu edit widget HTML/JavaScript (kalau belum ada tambah widget aja)
3. masukkan kode berikut dalam widget HTML/JavaScript :

<style> #hcl { position:fixed; top:100px; left:0px; z-index:+1000; } * html #hcl {position:relative;} .hcltab { height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic4D44gKYPfjIGTJy6NSh7UGx2oxVNXF4mZTDDEmJPzV7dzU8s-NFRxqOcahnTS5md4axSCPwuLWhEof1jHgXWeeS2H0t0C4Yaw7NTaTFJ4ppQ6B17T7Vj-LbzMICiEogO1Etzu-x2-FI/s400/cbred-LEFT.png') no-repeat; } .hclcontent { float:left; border:2px solid #790909; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent"> <---KODE SHOUTMIX ANDA DISINI!---> <div class="hc-credit"> <span style="float:left"> Get this <a target="_blank"> Widget </a> and <a href=http://xenon-universe.blogspot.com/2011/11/mengubah-tampilan-shoutbox-menjadi.html target="_blank"> Desaign! </a> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script>

----------------------------------------------------------------------------------------------------- setelah selesai simpan settingan anda dan...... selamat! shoutbox anda sudah berbeda dari sebelumnya....