Membuat Hidden Chat Box Versi 2

Membuat Hidden Chat Box Versi 2

 share kali ini Membuat Chat Box di Samping Blog (Hidden Chat Box), nah kali ini saya kembali share Membuat Hidden Chat Box Versi 2. Dari keduanya, hampir sama, yang membedakan cuma tampilanya saja, kebetulan saya jatuh cinta dengan tampilan yang versi 2 ini. Seperti yang saya pakai di blog saya sekarang ini. Baiklah sob yang berminat ingin memasang atau mengganti Chat Box-nya silakan langsung dipraktekkan saja. Ok sob kita langsung menuju ke TKP, cekidot.......

 

 

1. Login ke Akun Blogger sobat.
2. Masuk ke Tata Letak/ Rancangan.
3. Pilih tambah gadget, lalu HTML/JavaScript dan copy pastekan kode di bawah 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-bottomleft:10px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:5px; -webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius: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 ini dengan Kode Chat Box yang sobat dapatkan dari situs pembuat Chat Box -->

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

Catatan : Pada tulisan yang bercetak biru di atas, silakan sobat ganti dengan kode Chat Box yang sobat dapatkan dari situs di mana sobat membuat Chat Box. Untuk tingginya, sobat tinggal mengganti Top-nya sesuai dengan keinginan sobat.