Cara Menciptakan Kotak Chat Tersembunyi

Cara membuat kotak chatting tersembunyi. mungkin nanti aku akan membahas mengenai Alternatif chating bagi pengguna shoutmix. Kali ini aku akan membahas tutorial blog mengenai kotak chatting yang tesembunyi.

Mungkin anda sudah pernah melihat kotak chatting yang tersembunyi di beberapa blog. Dimana widget chatting itu akan muncul sehabis diklik. Script yang dipakai pada kotak chatting tersebut yaitu j4vascript. Javascript memang sanggup membuat script-script yang andal dan kreatif.

Di posting ini anda akan mendapatkan tutorial blog mengenai cara membuat kotak chatting tersembunyi tersebut. Langsung saja ikuti tutorialnya di bawah ini.

1. Masuk ke blogger.
2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
3. Klik tulisan Add a Gadget (Tambah Gadget).
4. Pilih gadget HTML/JavaScript.
5. Copy-paste kode berikut di bab konten.
   <script type="text/j4vascript">
   function showHidechat(){
   var chat = document.getElementById("chat");
   var w = chat.offsetWidth;
   chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
   chat.opened = !chat.opened;
   }
   function movechat(x0, xf){
   var chat = document.getElementById("chat");
   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   chat.style.right = x.toString() + "px";
   if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="chat">
   <div class="chat-click" onclick="showHidechat()"> </div>
   <div class="chatbox">
   <center>
   
   
   
   
   SCRIPT CHATTING DI SINI
   
   
   
   
   </iframe></center>
   <a href=" " title="Cara Membuat Kotak Chat Tersembunyi" target="_blank">[+]</a>
   <span style="float:right">
   <a href="j4vascript:showHidechat()">
   [x]
   </a></span>
   </div></div>
   
   
   <script>
   var chat = document.getElementById("chat");
   chat.style.right = (30-chat.offsetWidth).toString() + "px";
   </script>
6. Simpan gadget.

CSS

Sekarang pada bab css, ikuti langkah-langkah berikut.

1. Pilih menu Layout (Tata Letak) » Edit HTML.
2. Cari kode ]]></b:skin>, kemudian copy-paste kode css berikut di atasnya.
   #chat{position:fixed; top:25px; z-index:+1000}
   * html #chat{position:relative}
   .chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
   .chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
   .chatbox a {text-decoration: none;}
3. Simpan template.

Anda sanggup mengubah gambar atau warna yang ada pada goresan pena berwarna biru di atas sesuai dengan keinginan.

Sekarang lihat hasilnya. 

Semoga berhasil..!

Sumber http://vostfourth.blogspot.com

Share this post