Sabtu, 26 November 2011

Cara Membuat Chat Box Floating

Mungkin sobat blogger sudah pada tau kegunaan Shout Box atau biasa dibilang Chat Box. Chat Box adalah gadget yang dapat membantu pengunjung berkomentar secara mudah. Sebelum anda membuat Chat Box, anda harus memiliki akun Chat Box terlebih dahulu. Untuk membuat akun-nya anda bisa cari di google. Bagi sobat blogger yang ingin membuat Chat Box Floating, silakan ikuti langkah-langkah berikut ini.

Langkah-langkah :

1. Masuk/Login ke Blog.
2. Pilih Rancangan.
3. Lalu pilih Tambah Gadget.
4. Kemudian pilih HTML/Javascript.
5. Lalu salin kode di bawah ini.

Kode berikut :

<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com -- http://www.fuad-xp.blogspot.com--> <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"> <!-- Kode Shoutmix mu Disini -->

MASUKAN KODE CHAT BOX ANDA DISINI

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

6. Kemudian Simpan.
7. Lihat hasilnya.

Semoga Bermanfaat ^_^

 
Design by Fuad XP | Bloggerized by Fuad XP - Fuad XP Premium | Free Download