Design CHATBOX Lucu

Kalian bosan gak sih dengan tampilan chatbox yang biasa biasa aja ???

nah ... disini saya akan memberikan beberapa tampilan/border untuk chatbox kalian

Seperti di posting sebelumnya "Merubah Tampilan CHATBOX berada di samping"

Kalian harus mendaftar di chatbox untuk mengambil Srcrip/HTML chatbox kalian ,
daftar disini 

next .....

Ikuti langkah - Langkah dibawah ini : 

1. Sign in akun Blogger

2. Dashboard > Page Element/Tata Letak > Add a Gadget/Tambah Gadget > HTML/Javascript

3. Copy-paste kode di bawah ini pada Text Dialog yang muncul saat kamu memilih HTML/Javascript

<div style="background:url(http://i804.photobucket.com/albums/yy321/anik93/chatbox-animation-1-1.gif) no-repeat;padding-right:8px;padding-left:1px;padding-top:130px;padding-bottom:35px;">
(PUT YOUR CBOX CODE HERE)
</div>

Setting Kode Chatbox :
Width : 170px || Height : 152px (bagian awal)
Width : 170px || Height : 75px (bagian akhir)

<div style="background:url(http://i804.photobucket.com/albums/yy321/anik93/yellow-girl-chatbox.gif) no-repeat;padding-right:3px;padding-left:17px;padding-top:140px;padding-bottom:80px;">
(PUT YOUR CBOX CODE HERE)
</div>

Setting Kode Chatbox :
Width : 170px || Height : 190px (bagian awal)
Width : 170px || Height : 75px (bagian akhir)

<div style="background:url(http://i804.photobucket.com/albums/yy321/anik93/strawberry.gif) no-repeat;padding-right:1px;padding-left:25px;padding-top:145px;padding-bottom:70px;">
(PUT YOUR CBOX CODE HERE)
</div>

Setting Kode Chatbox :
Width : 155px || Height : 210px (bagian awal)
Width : 155px || Height : 75px (bagian akhir)

<div style="text-align: center;">
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRfFka8bpD7pNNaRGw3-XBO1fZMppciH59pH1ETVz8PWO6JN2_-woz6fCmCsqOw-5Jqy8Blsnx0LtNw12HAr3oUJJdIdR6UD-5H-eNuGOU8oczYEy95wztPDm7h3OuexIHHaQuWfB29hP/s1600/48f40bf510f7c.gif) no-repeat;padding-right:20px;padding-left:3px;padding-top:102px;padding-bottom:50px;">
</div>
<b></b><br />
<div style="text-align: center;">
<b><b>(PUT YOUR CBOX CODE HERE)</b></b></div>

Setting Kode Chatbox :
Width : 180px || Height : 120px (bagian awal)
Width : 180px || Height : 55px (bagian akhir)

<div style="text-align: center;">
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO_IaSBhUSRMt1ZAjGc-BHGGVfMYJ1bpABZtqbS4k_H1pUgJeJLiN3cOiUyfluMrWoMham18ioPHBJJRBx62muV0D8JzhH_LbRSGRcKWp9dka886SELbETLEx0QWgmGX14vL0L8oSDTX7w/s1600/48f414b0b4091.gif) no-repeat;padding-right:80px;padding-left:4px;padding-top:105px;padding-bottom:30px;">
</div>
<b></b><br />
<div style="text-align: center;">
<b><b>(PUT YOUR CBOX CODE HERE)</b></b></div>

Setting Kode Chatbox :
Width : 180px || Height : 135px (bagian awal)
Width : 180px || Height : 55px (bagian akhir)

<div style="text-align: center;">
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1c0J3P9YMaG6e1OgcwVe1n4UIPTZ_bEqd44x0Y1ggIkAlzkFZS_MgKCI7byMkw7d1yfPb26E0kDlwf1hofIjtmpoldMkDbAbjZUN-d0OwweBAbeHfJgAvtntyTZjeWRebuJVH9a8QwtEa/s1600/48f419e550585.gif) no-repeat;padding-right:80px;padding-left:5px;padding-top:135px;padding-bottom:20px;">
</div>
<div style="text-align: center;">
<b>(PUT YOUR CBOX CODE HERE)</b></div>
<div style="text-align: center;">
</div>
</div>
</blockquote>
</div>

Setting Kode Chatbox :
Width : 175px || Height : 135px (bagian awal)
Width : 175px || Height : 50px (bagian akhir)

4.Jangan lupa , di script/HTML yang sudah kalian copy tadi ,,Ubah kata ini "PUT YOUR CBOX CODE HERE" dengan kode chatbox kalian.

5.Simpan dan lihat hasilnyaa,,,

Semoga Berhasil :)

Sumber : Wedget Tutorial