05/03/11

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 class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- 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.

14 comments:

Anonim mengatakan...

What a great resource!

online pharmacy

Anonim mengatakan...

Very intereresting reading. thx

nolvadex

ridwan mengatakan...

makasih totorialnya.. :)

Ijul mengatakan...

sudah dicoba dan berhasil :), sayang ga ada sistem karma disini, klo ada aq kasih +10/cendol segrobak deh... trims....

DEBRIAN RUHUT BLOG mengatakan...

Perlu diketahui bahwa tidak semua browser menampilkan sempurna chat box melayang di atas. Bila menggunakan firefox, tampilan chat box akan menonjol ke depan (tidak enak dipandang). Maka ganti javascript terakhir dengan yang satu ini untuk mendapatkan kompatibilitas di berbagai browser (100% Tested):

var gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}

Best Regard,
http://debrianruhut.blogspot.com/

Anonim mengatakan...

terimakasih

seaarchilmu mengatakan...

kalau di blogspot bisa gak ya mas ???

Author mengatakan...

Update script terbaru untuk chat melayang..

berguna untuk mendeteksi resolusi browser, karna sering kita temukan pada bwoser dengan resolusi 800 dengan 1024 hasil chat boxnya berbeda, yakni pada browser dengan resolusi 800 lebih maju (nongol), sedangnkan pada 1024, tampilannya normal:
Javascriptnya,

// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************

// for NN4/IE4
if (self.screen) {
width = screen.width
height = screen.height
}

// for NN3 w/Java
else if (self.java) {
var javakit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = javakit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
else {

// N2, E3, N3 w/o Java (Opera and WebTV)
width = height = '?'
}

var gb = document.getElementById("gb");
if (width==1024) {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}else if (width==1280) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";}


Salam hangat,
http://debrianruhut.blogspot.com

DEBRIAN RUHUT BLOG mengatakan...

Ini Javascript, jadi bisa di pakai di mana saja..ingat bahwa script di atas di tambahkan/di edit pada Blok Javascript paling akhir dari keseluruhan code yang disajikan di artikel di atas.

rimaru mengatakan...

mantap tutorialnya dan berhasil.. makasih..

agen sbobet mengatakan...

muter muter nyari ternyata yg bagus di sini script nya -.-

Anonim mengatakan...

berkunjung balik yugh gan http://firecybernet.blogspot.com/

Anonim mengatakan...

In addition it is bendable primarily slows down time for producing more fresh vegetables and it
could be some fruits directly more elements. Basic answer is, pretty own really diligently put together.
Do you need an easy way to acquire healthful menus and also goods certain whole family will adore and
which also will not hit you up for an arm even a lower?
Notwithstanding juicer fanatics will point to allow them to normal daily functioning just like a defense regarding the accelerated price tag.


Also visit my site; best blender

bpk wijaya mengatakan...

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

Posting Komentar

Silahkan Berkomentar disini...