Tutorial – Ajax Shout Box
Assalamualaikum dan Salam Sejahtera.
Fuh!, baru sampai kg setelah dua minggu berkampung di INTURA, Sg. Petani untuk Kursus Induksi Umum. Penat tapi best, banyak ilmu dan juga kawan yang dapat.
Ok la, atas permintaan BrosKL dan temannya2, aku buat juga tutorial untuk macam mana nak buat Ajax Shout Box ini. Sebenarnya banyak tools, plugin yang boleh diguna pakai, tapi aku rajin sikit, suka susahkan diri untuk customize. Janji hasilnya aku suka dan ada orang yg sudi menyukainya.
Caranya begini,
- Download terlebih dahulu script di Highslide JS. Apabila selesai download, unzip fail berikut, di dalam folder tu juga mengandungi pelbagai contoh yang menarik yang boleh digunakan, terutamanya di dalam develop system dan web. Cuma kali ini aku nak terangkan untuk kegunaan ajax shoutbox ni.
- Create account shoutbox jika belum ada lagi. Contoh Cbox, ShoutMix. Jika dah ada, boleh copy terus HTML Code yang diberikan.
- Upload folder highslide tadi ke web server kalau tak mau testing di localhost. Pastikan path (location folder) adalah betul.
- Di dalam folder themes, edit file header.php dan letakkan script di bawah ni di dalam ruangan <HEAD> dan selepas itu, Save.
<script type="text/javascript" src="DOMAINAnda/highslides/highslide-with-html.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'DOMAINAnda/highslides/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script> - Create new html file, dalam file tersebut, paste kan HTML Code yang diberi oleh ShoutBox tadi. Contoh shout.html, kemudian upload ke dalam server.
- Kemudian, buka Wordpress Dashboard > Appearance > Widgets
- Pilih Widgets Text, dan masukkan Code ini dan Save.
<a href="http://DOMAINAnda/shout.html" onClick="return hs.htmlExpand(this, { objectType: 'ajax'} )" title="History"> - Siap, Refresh Front Page anda. Kalau x jadi bagitau aku lain.
3 Komen bagi “Tutorial – Ajax Shout Box”
bagus tutorial ni.. nanti nk try test.. time kasih..
Tutorial yang berguna, best dan boleh digunakann untuk development system. Thanks ammar..
step 7 tu kena lengkap..
<a href="http://DOMAINAnda/shout.html" onClick="return hs.htmlExpand(this, { objectType: 'ajax'} )" title="History">shoutbox</a>