Membuat Latarbelakang Pada Chat Box Anda

Oleh kerana ada permintaan dari saudari Maisurah dan cadangan dari saudara Aenaz untuk membuat tutorial ini. Aku dengan penuh kerelaan membuka baju mata untuk menulis tutorial ini khas buat para blogger tegar dan blogger baru yang sentiasa dahagakan ilmu mencantikkan blog. Jom ikuti tutorial versi HIDUP BERANI UNTUK GAGAL ini.

Bahagian 1: Menyediakan Latarbelakang Menggunakan Photoshop

Aku akan tunjukkan langkah yang sangat mudah untuk korang membuat latarbelakang kotak sembang korang. Pertama sekali korang perlu dapatkan imej atau ikon (.png) yang menarik untuk dijadikan ‘header’ atau kepala pada latarbelakang kotak sembang anda terlebih dahulu.

Kemudian buka perisian photoshop korang, buat satu imej baru bersaiz 250px darab 400px. Ikut saiz yang korang inginkan mengikut kesesuaian ’sidebar’ blog atau website korang.

Setelah selesai membuat satu imej baru, buat satu kotak pada imej tersebut. Mengikut kreativiti korang, bucu lengkung ataupun bucu tajam. Aku lebih gemar kepada bucu yang melengkung, kerana ia lebih nampak menarik.

Lepas korang berpuas hati dengan kotak yang korang buat itu, masukkan imej atau icon yang korang cari mula-mula tadi sebagai ‘header’. Dalam contoh pada kali ini, aku menggunakan logo CBOX sebagai tanda penghargaan buat CBOX. Pastikan korang sudah mengubahsuai saiz imej atau ikon itu terlebih dahulu untuk kesesuaian latarbelakang yang korang gunakan.

Akhir sekali, korang ‘delete background’ pada bahagian ‘layer’. Kemudian save latarbelakang kotak sembang korang dalam format [dot]PNG. Upload latarbelakang korang tadi pada image hosting korang.

Bahagian 2: Dapatkan Chat Box

Seterusnya, mari kita dapatkan kotak sembang atau chat box korang di CBOX. Daftar dan login akaun korang. Pertama sekali yang korang perlu lakukan ialah ‘edit style’ kotak sembang korang.

Pertama sekali korang klik pada ‘Look & Feel’ dan pilih ‘Style Gallery’. Dalam galeri ini, korang pilih ’style Transparent’ dan kemudian ’save’.

Kemudian, korang boleh ‘edit style’ tersebut di bahagian ‘Edit Style’ di bawah menu ‘Look & Feel’ tadi. Korang boleh pilih ‘font type & size’ yang korang suka, selain itu juga korang boleh ubah warna pada ‘font’ korang. Aku nasihatkan korang agar tidak memasukkan kod warna pada bahagian yang sudah kosong, ini kerana ia dalam ‘mode transparent’.

Akhir sekali dapatkan ‘chat box code’ pada menu ‘Publish’. Salin kod tersebut dan ‘paste’ pada ‘Notepad’ terlebih dahulu bagi memudahkan langkah seterusnya.

Bahagian 3: Coding CBOX and Background

Untuk bahagian ini agak sukar sedikit, aku nasihatkan korang tanam sifat HIDUP BERANI UNTUK GAGAL terlebih dahulu sebab korang mesti ‘try and error’ sampai korang berpuas hati. Kerana mungkin kotak sembang korang akan bertindih dengan ‘header’ pada latarbelakang korang.

Background Code / Kod Latarbelakang

<div style="background:url(URL LATARBELAKANG KORANG) no-repeat left top; width:250px;height:400px;padding: 115px 0px 0px;text-align: center;line-height: 0">

Kemudian masukkan ‘chat box code’ selepas ‘background code’ di atas. Dan akhir sekali masukkan kod ini, </div>

Untuk jarak antara imej header latarbelakang, korang perlu mengubah di bahagian padding pada ‘background code’.

Untuk lebar dan ketinggian ‘background’ korang boleh ubah pada ‘width and height’ pada ‘background code’.

Untuk lebar dan ketinggian ‘chat box’ korang, sila ubah pada ‘width and height’ pada ‘chat box code’. Dalam ‘chat box code’ terdapat dua bahagian iaitu ‘cboxmain’ dan ‘cboxform’. Untuk ‘width’ kedua-dua bahagian ini perlulah sama dan kecil sedikit daripada ‘width’ dalam ‘background code’. Untuk ‘height’ pula, pada bahagian ‘cboxform’ mestilah di antara 65px ke 75px dan pada bahagian ‘cboxmain’ mengikut kesesuaian pada latarbelakang korang. Untuk lebih memudahkan korang, ikut formula matematik aku.

Background Height = Background Padding + CBOXmain Height + CBOXform Height

Contohnya aku gunakan ‘background’ dengan ‘height’ = 400px dan ‘background padding’ = 115px. Bakinya pada ‘cboxmain’ dan ‘cboxform’, untuk ‘cboxform’ aku gunakan 70px dan akhir sekali pada ‘cboxmain’ iaitu 215px.

400px = 115px + 215px + 70px

Cuba lihat hasilnya di bawah ini, comel tak? Sebarang pertanyaan korang boleh tinggalkan komen di bawah, jika korang inginkan perkhidmatan aku untuk mengubahsuai kotak sembang korang juga boleh tinggalkan komen di bawah. Sekian terima kasih.

Nota CBOX: Minta maaflah kalau tutorial aku ini bukan dalam bentuk ‘point’. Kalau aku buat bentuk ‘point’ nanti takut korang tak faham pula. Aku juga kena terangkan panjang lebar.
Nota Amaran: Ujikaji ini hanya untuk pengguna CBOX sahaja, setakat ini aku belum buat ujikaji ke atas SHOUTMIX lagi. Harap maklum, aku sibuk.

Popularity: 57% [?]

Related Posts

1. Kesalahan HTML Yang Sering Dilakukan Oleh Blogger
2. 5 Photo Editor Ala Photoshop
3. Seksikan Desktop Anda Dengan ObjectDock
4. Memaparkan Google Adsense Di Blog Berbahasa Melayu
5. Tips Meningkatkan Trafik Blog Anda

Dapatkan update segera dengan melanggan feed saya melalui RSS atau terus ke Email anda. Jangan lupa follow saya di Twitter juga.

Tagged as: Background, blog, blogger, Blogging, CBOX, CBOX Background, Chat Box, ChatBox, code, Coding, Gadget, hidup berani untuk gagal, Internet, Komputer, photoshop, Shoutmix, Sidebar, Tips, Tutorial, Widget