Tutorial Membuat Chatbox Unyu

Well, setelah sekian lama semenjak chatbox gue yang lalu *entah merk apa* gak gratisan lagi, dan gue berhenti pake chatbox, akhirnya sekarang iman gue tergugah buat nambah widget chatbox di blog ini. Tapi, gue pengen chatbox gue spesial pake telor dan beda dari chatbox orang lain.
Berhubung suasana masih dalam tahun baru, jadi gue buat tutorial khusus yang bakal membahas tuntas gimana cara buat CHATBOX UNYU.
Yuuk mari cekidot..

Tutorial ini gue buat dengan googling ke sana ke mari dan pengalaman coba-coba sendiri berulang-ulang kali dari isya ampe subuh *lebay tapi nyata*, jadi untuk menghargai pengorbanan mata gue yang minus ini, mohon yang mau kopas tolong sertain Link alamat blog gue.. Thankiss

Berhubung tutorial lengkap bikin CHATBOX UNYU di google masih minim, jadi di sini akan gue bahas setajam silet. #Tsaah~

Sebelumnya, pastiin lo udah punya akun chat box dan photobucket.com, berhubung yang gue pake disini Cbox, jadi dilahkan buat akun Cbox dulu di sini. Tutorialnya buat bikin akun Cbox bisa lo liat di sini. Gue gak tau kalo pake merk chatbox lain yaa.. jadi silahkan coba sendiri.

 Oke, pembuatan Chatbox Unyu ini ada tiga tahap.

Tahap Pertama: Membuat gambar background untuk chatbox lo.

Lo bisa mengkreasikan gambar lo sesuka hati pake program apapun, mau potoshop, corel, paint, photoscape, artrage, meitu, bahkan Ms. Word pun bisa. Yang penting ntar hasilnya gambar yaa.. bukan diagram ato yg lainnya.

1. Buat background dengan kreasi kalian masing-masing.
Catatan: Kalo lo cuma mau pake gambar yg lo buat tadi untuk background chatbox elo, elo bisa lewatin langkah kedua ini.


2. Lanjut untuk membuat background animasi ( background idup/gerak-gerak) kaya punya gue, lo bisa tambahin lagi jumlah gambarnya buat jadi animasinya yg bisa lo buat di photoshop ato photoscape.
   Kalo lo gak ngerti lo bisa tanya google gimana cara bikin gambar animasi.
   Eits, sebelom lo simpen, atur dulu yaa ukuran kanvasnya. Nah ini dia yang rada ribet. Lo kudu sesuain sama  ukuran chatbox lo. Nah ukuran background gambar harus lebih besar dari ukuran chatbox. Misal kaya punya gue,  ukuran background gue, yaitu width (lebar): 250px dan height (panjang): 399px.  Untuk ngaturnya, kalo di photoshop lo klik Image > Canvas Size. Kalo di photoscape udah ada tombol buat ngatur ukurannya  keliataan di samping kanan yaa.  
Jadi gue kudu buatukuran chatbox gue lebih kecil, di sini gue buatnya width: 200px dan height: 270px. Ukuran chatbox bisa lo atur di akun chatbox lo dengan masuk menu Look & Feel > Layout option. Dan atur juga warna cbox lo biar sesuai ama warna background di Look & Feel > Style Presets.

Kalo udah selese, save.

Tahap Kedua: Mengupload background chatbox.

Buka akun photobucket lo terus upload background lo. Kalo udah di upload simpen dulu kode Direct Linknya di notepad.

Tahap Ketiga: Finish ( Masukin kode ).

Ini bagian paling ribet. Lo kudu teliti.
Masuk ke blog lo terus klik tata letak terus pilih tambahkan gadget (dimana aja suka-suka lo) terus pilih HTML. Setelah muncul window baru, masukkan kode dibawah ini

<center><div id="edited" style="width:250px; height:399px; background:url(http://i586.photobucket.com/albums/ss310/nice_nizwa/cuteblue250x399.gif) no-repeat; padding-top:80px; padding-left:1px;  padding-right:16px;  padding-bottom:35px; position:center" align="center"><!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="190" src="http://www6.cbox.ws/box/?boxid=800097&amp;boxtag=2zwg7w&amp;sec=main" marginheight="1" marginwidth="1" scrolling="auto" allowtransparency="yes" name="cboxmain6-800097" style="border:#ababab 1px solid;" id="cboxmain6-800097"></iframe></div>
<div><iframe frameborder="0" width="200" height="80" src="http://www6.cbox.ws/box/?boxid=800097&amp;boxtag=2zwg7w&amp;sec=form" marginheight="1" marginwidth="1" scrolling="auto" allowtransparency="yes" name="cboxform6-800097" style="border:#ababab 1px solid;border-top:0px" id="cboxform6-800097"></iframe></div>
</div>
<!-- END CBOX --></div></center>

Keterangan:
★ adalah kode Direct Link background lo (yg tadi di photobucket)
★ adalah kode Chatbox lo.
★ adalah lebar dan tinggi background ( ukuran gambar background yang kita simpen )
★ adalah lebar dan tinggi kolom chat
★ adalah lebar dan tinggi form tempat mengisi identitas.
padding-top adalah margin (jarak) chatbox ke background.

Setelah selesai klik save. Terus liat tampilan blog lo.
Taraaaa~ Chatbox karya lo udah jadiiii!!!!

Buat yang gak mau repot buat background atau lagi gak mood berkarya, tungguin postingan selanjut gue karena gue bakal ngeshare background yang udah jadi. :)