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&#8217;) 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.

Iklan