Chat Box atau Buku Tamu dengan Animasi jQuery

Dalam artikel ini, saya ingin berbagi widget chatbox menggunakan animasi jQuery buat sobat blogger yang ingin blognya terasa lebih ramai akan pengunjung.
Yah, dengan chat box atau buku tamu ini, pengunjung bisa meninggalkan lapak atau kesan pesan buat blog sobat.

ChatBox yang satu ini sedikit berbeda dari chatbox sebelumnya yang pernah saya singgung. Contohnya sobat bisa melihat chatbox yang berada di sebelah kanan halaman.
Chatbox tersebut saya aplikasikan dengan jQuery dan tambahan CSS yang membuat tampilan widget ini terlihat begitu menarik.

Selain itu, saya juga menambahkan fitur edit CSS langsung di sini beserta contoh preview dari hasil edit supaya sobat blogger bisa merubah segi penampilannya tanpa ribet-ribet, sekaligus ini merupakan salah satu media pembelajaran bagi yang ingin belajar CSS.

Berikutnya langsung saja ke tahap pemasangan ChatBox nya.
Bagi sobat yang belum memiliki widget buku tamu, sobat bisa daftar di CBOX secara gratis dengan klik link ini.
Pertama kali copy script jQuery di bawah ini dan letakkan sebelum atau di atas tag </head>

[hg]<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script>[/hg]
<script src='https://sites.google.com/site/adityameilaz/file-adityas-blog/jquery.slidePanel.fx.js' type='text/javascript'></script>

Catatan: Jika di dalam template anda sudah terpsang jQuery, script pada bagian yang dihighlight dapat anda abaikan

Rubah style CSS di bawah ini dengan style gaya yang diinginkan dan lihat hasil preview pada chatbox yang ada di samping kanan halaman ini.

Dilarang menekan tombol Enter pada saat memodifikasi CSS. Gunakan sisa space yang masih ada jika ingin menambahkan attribute dalam CSS.

Memasang Widget Chat Box

Jika anda sudah selesai dalam pengeditan CSS di atas. Ikuti langkah seperti yang ada di bawah ini.

Copy paste kode CSS di atas pada form di bawah ini.
Copy paste kode Buku Tamu anda pada form kedua.
Pilih tombol "Tambahkan!" untuk mengaktifkan widget Chat Box

Enjoy Gan!
Chat Box

Gabung ke group:

12 Respon Komentar

Fikri Rozan, said...

March 24, 2012 at 6:43 PM

Mantap tutorialnya :w:
ijin nyoba ya :k:

Unknown, said...

March 24, 2012 at 9:06 PM

iy gan, semoga bermanfaat :u:

Aulia Syarif, said...

March 31, 2012 at 12:36 AM

Thanks gan ilmunya..

March 31, 2012 at 2:37 AM

iya gan..
terima kasih dh berkunjung n sudah menggunakan widget dari saya gan :n:

◄=iNfo_MaSTaH=►, said...

April 13, 2012 at 9:00 PM

thanks gan berguna nih

http://infomastah.blogspot.com :w:

April 13, 2012 at 9:29 PM

@◄=iNfo_MaSTaH=► terima kasih gan,, widget dari ane boleh d coba gan mumpung cuma" :d: :D
kidding gan..:e:

Anonymous, said...

May 6, 2012 at 4:56 PM

Terimakasih infonya tapi kok gk bisa sih ?

May 6, 2012 at 11:11 PM

@Herdian Gbs gmn maksud'a gan.?? :c:
Coba dicoba lagi gan, cz yang lain'a jg pada work ko.. :b:

January 22, 2014 at 3:02 PM

gan kok gkk bisa, malah not found atau ups! itu kesalahan, mohon pencerahannya! :h:

January 22, 2014 at 3:53 PM

@Topani septian ridhotulloh
gan gkk work!

January 26, 2014 at 11:49 AM

@Topani septian ridhotulloh maaf gan kalo g work, kode generator CBOXnya masih ane perbaiki, tunggu 15 menit ke depan udah bisa digunakan lagi :e:

November 13, 2015 at 8:06 AM

cara mengapusnya gimana gan

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar

:a:

:b:

:c:

:d:

:e:

:f:

:g:

:h:

:i:

:j: 

Emotion lainnya?

Adityas Blog