Tuesday, October 2, 2012

Mengkostumasi Kotak Cbox (Floating Button)

Pada artikel sebelumnya saya sudah membahas tentang cara Memasang Chat Box untuk Blog dengan Cbox yang mirip dengan chat box pada Facebook. Sekarang saya akan menjelaskan cara untuk mengkostumasi Cbox khususnya untuk Floating Button. Nah langsung saja.

Saya akan menjelaskan beberapa kostumasi untuk Cbox ini. Yang pertama:

(Tips : Gunakan kombinasi keyboard Find yaitu Ctrl + F untuk menemukan kode yang dijelaskan dibawah)

POSISI

Kamu dapat memindahkan posisi dari kotak dan tombol Cbox ini dari posisi awal pada pojok kanan bawah dari templit blogmu dengan cara:
  • Untuk memindahkan dari pojok kanan bawah ke pojok kiri bawah ganti kode right pada script tersebut dengan left.
  • Untuk memindahkan ke pojok kanan atas ganti kode bottom pada script tersebut dengan top.
  • Untuk memindahkan ke pojok kiri atas ganti kode bottom dengan top serta ganti kode right  dengan left.
Catatan: masing-masing kode diatas ada 2, kode pertama untuk tombol Cbox-nya dan kode kedua untuk kotak Cbox-nya. Saya sarankan untuk mengganti keduanya. 

TEKS PADA TOMBOL

Untuk mengubah Teks pada Tombol (Button) Cbox dari teks awal Open Cbox (untuk Buka) dan Close Cbox (untuk Tutup) dapat dilakukan dengan cara:
  • Untuk mengganti "Open Cbox" kamu cukup mengganti dengan kata yang kamu inginkan. Misal : Chat here, Buka Cbox, dsb. Tambahan: Pada script Cbox ini ada 2 teks Open Cbox, saya harap kamu mengganti keduanya. 
  • Untuk mengganti "Close Cbox" kamu cukup menggantinya seperti cara diatas. Tapi untuk yang ini cuma ada 1 teks.

LEBAR

Mengubah lebar dari Kotak Cbox maupun Tombol Cbox dapat dilakukan dengan cara:

  • Untuk mengubah lebar Tombol Cbox cari kode width, jika kamu menemukan 2 pilih yang pertama. Maka kamu akan menemukan kode berikut width: 200px; kamu tinggal ganti 200px; sesuai dengan lebar yang kamu inginkan.
  • Untuk mengubah lebar Kotak Cbox kamu bisa lakukan cara diatas tetapi gunakan kode width yang kedua.

Bagaimana? Cukup mudah bukan. Jika kamu menyukai artikel ini silakan bagikan ke teman-temanmu dan berikan komentar.

No comments:

Post a Comment