Beranda > Home > Membuat Chat Box Melayang pada WordPress

Membuat Chat Box Melayang pada WordPress

Pada artikel sebelumnya telah ditulis postingan tentang Cara Memasang Chatbox, GuestBook, Shoutbox, Tagboard chat widget!. Sekarang kita coba untuk memasang chat box tersebut pada Blog WordPress. Untuk memasang chat box ini, pastikan anda sudah mendaftar di beberapa layanan chat box seperti ditulis pada postingan diatas.

Nah bagaimana cara membuatnya ?

1. Buka file footer.php, letakkan kursor mouse tepatnya sebelum kode :
<?php wp_footer(); ?>
</body>
</html>
2. Silahkan masukan kode ini kedalam file footer.php tersebut :

<style type=”text/css”>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url(‘http://i52.tinypic.com/e1c96g.jpg’) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #990000;
background:#F5F5F5;
padding:10px;
}
</style>
<script type=”text/javascript”>
function showHideGB(){
var gb = document.getElementById(“gb”);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(“gb”);
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + “px”;
if(x0!=xf){setTimeout(“moveGB(“+x+”, “+xf+”)”, 10);}
}
</script>
<div id=”gb”>
<div onclick=”showHideGB()”> </div>
<div>
<!– KONTEN –>
KODE CHAT BOX : Shoutmix, Shout Box, Dll
<!– KONTEN –> 

<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[Hide]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script>

2. Copy + Paste kode chat box yang anda miliki pada bagian :
<!– KONTEN –>
KODE CHAT BOX : Shoutmix, Shout Box, Dll
<!—KONTEN –>
3. Simpan file footer.php, kemudian refresh halaman untuk melihat hasilnya.

About these ads
  1. Belum ada komentar.
  1. No trackbacks yet.

Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: