Cara Memasang Background Images di CBOX Chat

Pernah tidak ketika teman-teman sedang melakukan blogwalking ke blog yang lain melihat ada tampilan berbeda pada background Cbox Chatnya? Yups, background Cbox Chat bisa kita buat sendiri backgroundnya dengan menambahkan sebuah image (pict) sesuai dengan selera teman-teman semua.

Buat teman-teman semua yang ingin Memasang Background Images di CBOX Chat di blognya, silahkan ikuti langkah-langkahnya di bawah ini:

1. Editing Pada Cbox Chat

a. Login ke akun Cbox teman-teman,
b. Setelah akun Cbox terbuka (halaman Home), arahkan kursor mouse teman-teman pada menu Look & Feel, kemudian pilih sub menu Layout Options,

lihat pict

c. Jika sudah maka teman-teman akan dibawa ke halaman edit Layout Options. Pada langkah ini, teman-teman hanya perlu setting beberapa bagian saja,

- Ubah width and height Cboxnya sesuai dengan keinginan teman-teman semua,
- Pada Form Layout, beri centang pada kotak Alternative layout,
- Pada Messages di kolom In Order pilih Newest at top dan jika sudah tinggal Klik Save.

lihat pict

d. Kemudian lanjutkan pada klik menu Look & Feel lagi tapi dengan sub menu Style Preset,

lihat pict

e. Nah, setelah teman-teman klik sub menu Style Preset maka teman-teman akan di bawa ke halaman Style Galerry. Untuk bagian ini saya sarankan teman-teman memilih Style Cboxnya yang Transparant saja, karena akan lebih bisa kelihatan contrast dengan background image yang akan digunakan.

Klik pada kotak Style Transparant lanjutkan dengan klik Confirm dan Save.

lihat pict

f. Setelah langkah-langkah di atas selesai, lanjutkan dengan klik menu Publish,

lihat pict

g. Pada bagian ini (Publish) teman-teman akan mendapatkan kode dari kotak Cbox Chat yang tadi sudah diedit. Copy dan paste terlebih dahulu kode tersebut dan Save As sementara di text note, note, atau word.

lihat pict

2. Menyiapkan Image (pict/gambar),

Setelah selesai dengan editing pada akun Cboxnya, langkah selanjutnya adalah menyiapkan image (pict/gambar). Teman-teman bisa mencari image nya dengan browsing di google atau menggunakan wallpaper, foto-foto pribadi dan lain sebagainya.

Kemudian setelah ada imagenya, teman-teman edit dulu bisa menggunakan Photoshop ataupun editing image lainnya dengan menyesuaikan ukuran imagenya SESUAI dengan ukuran Cbox yang di edit tadi (width and height Cboxnya). Misal: 140px x 300px.

Lalu UPLOAD image yang sudah teman-teman edit tersebut bisa ke Photobucket ataupun Facebook untuk mendapatkan source URL imagenya.

3. Memasang Background Image Cbox ke Blog

Setelah kode Cbox dan URL imagenya sudah didapatkan, maka langkah selanjutnya adalah memasang background image tersebut di blog.

a. Setelah login ke akun blogspot teman-teman, langsung saja menuju ke Design/Tataletak/Layout >> Page Elemen >> Add a Gadget >> HTML/Javascript,
b. Masukkan kode di bawah ini dengan cara Copy paste ke dalam konten HTML/Javascript:

<center><div style="background-position:center;background:url(ALAMAT URL IMAGE);
width:155px; height:229px;
padding-top:0px;padding-left:1px;
background-repeat:no-repeat;">

MASUKKAN KODE CBOX TEMAN-TEMAN DI SINI

</div></center>

- Ganti tulisan yang berwarna BIRU dengan alamat URL image teman-teman,
- Ganti tulisan yang berwarna MERAH dengan KODE CBOX teman-teman yang tadi di save di note/word.
- Ganti ukuran lebar dan tinggi Image dengan mengganti tulisan yang berwarna HIJAU.

b. Contoh hasil akhir kodenya bisa teman-teman lihat contoh punya saya di bawah ini:

<center><div style="background-position:center;background:url(http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs017.snc4/34207_138735792818579_100000464777133_333360_6054030_n.jpg);
width:155px; height:229px;
padding-top:0px;padding-left:1px;
background-repeat:no-repeat;">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="155" height="229" src="http://www3.cbox.ws/box/?boxid=3164449&boxtag=nh2rat&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="155" height="77" src="http://www3.cbox.ws/box/?boxid=3164449&boxtag=nh2rat&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

</div></center>

c. Jika sudah selesai, maka tinggal Save dan lihat hasilnya.

Seperti itulah kira-kira Cara Memasang Background Images di CBOX Chat, semoga informasi ini bisa bermanfaat. Untuk teman-teman yang mau mencoba untuk membuat Background Images di CBOX Chat, monggo dipraktekkan, semoga berhasil.