peluang usaha

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

0 Komentar :

Posting Komentar

Silahkan sisipkan komentar jikalau anda berkunjung atau nyasar ke blog ini. Komentar anda sangat berguna dan berharga untuk menjadikan blog ini menjadi lebih baik. Mohon gunakan kata-kata yang sopan dalam berkomentar. Komentar SPAM, SARA dan sejenisnya tidak akan ditampilkan.

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