e-learning Courseware Designer รุ่นที่ 1 โครงการมหาวิทยาลัยไซเบอรฺ์

วันพฤหัสบดีที่ 23 เมษายน พ.ศ. 2552

การสร้างห้องแชท Cbox หรือ Shoutbox


ห้องแชท Cbox หรือ Shoutbox จะต้องติดตั้งอย่างไร ?????? อันดับแรกใส่ code ที่เอามาจากเวบ www.cbox.ws ดังนี้คะ

1. ไปที่ www.cbox.ws จะเจอหน้าตาดังรูป ให้กดที่ Tab 'Sign Up' แต่ต้องลงทะเบียนกันก่อนนะคะ

2. ใน Tab 'Sign Up' กรอกข้อมูลลงไปเลย อย่าลืมจำ Username กับ Password ไว้ด้วยนะ จากนั้นกดปุ่ม 'Create my Cbox!' ได้เลย พอกดปุ่มปุ๊บ เราจะได้รับ email จากเวบ หากลืม Password ก็ไปดูที่ email ได้นะคะ

3. ลงทะเบียนเสร็จจะขึ้นหน้าจอดังรูป ก็กด 'Continue>>' ต่อได้เลย มันจะพาเราไปหน้า Log In

4. หลังจาก Log In จะเข้ามายังหน้าที่มี code Cbox แล้วค่ะ แต่ช้าก่อน เพราะว่า เราสามารถตกแต่ง Cbox เพิ่มเติมได้ โดยดูที่เมนูทางซ้ายมือ กด 'Colors & Fonts'

5. ในหน้าจอ 'Colors & Fonts' เราสามารถกำหนดสีของส่วนต่าง ๆ ของ Cbox ได้ ถ้าต้องการเลือกแบบที่มีอยู่แล้ว ให้กด 'Preset' (หมายเลข 1) ถ้าต้องการเลือกสีเอง ก็ดูสีได้จาก 'Colour Picker' (หมายเลข 2) แล้วก็เอารหัสสีมาใส่ค่ะ พอเปลี่ยนรหัสสีแล้วรูป Cbox ก็จะเปลี่ยนตาม (หมายเลข 3) แต่งจนโอเคแล้วก็กดปุ่ม 'Apply' (หมายเลข 4) ได้เลยค่ะ

6. พอกดปุ่ม 'Apply' แล้ว เราก็จะกลับมาหน้าเดิม :D ให้ดูเมนูทางซ้ายมือ กด 'Quick Setup' เพื่อกลับมาเอา code cbox ค่ะ copy code มาทั้งหมดเลย

7. มาดูหน้าตา code Cbox ที่ได้กันก่อน ดังข้างล่าง

8. แบ่ง code ออกเป็น 2 ส่วน โดยลบส่วน comment, <> และ <> ออกได้เลย จะเหลือ code ดังรูป (สังเกตว่า code เป็น 2 ส่วนแล้วนะ เดี๋ยวตอน Add Link จะใส่ทีละส่วนนะคะ)

9. ยังไม่พอเพราะว่า code ยังยาวเกินกว่าจะใส่ลงใน Link ของ Exteen ค่ะ เพราะฉะนั้นต้องลบเครื่องหมาย "" (double quotes) ออกด้วยค่ะ จะเหลือ code ดังรูป เมื่อลบเสร็จแล้ว ให้จัดให้ code อยู่บรรทัดเดียวกันด้วยนะคะ

ต่อไปจะเป็นการใส่ code ลงบลอคที่ Exteen

10. ไปที่ Manage -> Links ดูตรงทางขวามือ จะมีกล่อง 'New Link' อยู่

11. ช่อง URL ให้ใส่เครื่องหมาย # และช่อง Description ให้ใส่ code จากข้อ 9 ค่ะ โดย code ทั้งสองส่วน ต้องใส่ช่อง URL เป็น # เหมือนกันนะคะ ดังรูป

12. ตรวจสอบก่อน ว่า link ที่เพิ่มไป มาครบทุกตัวอักษรรึป่าว โดยดูที่หน้าเดิมเลยค่ะ ดู Link ล่าสุดที่เป็น code cbox ถ้า code มาไม่ครบ แสดงว่า code ยังยาวเกินอยู่นะ

13. เสร็จแล้ว ไปดู Cbox ในบลอคได้เลย

ที่มา http://jennessa.exteen.com/20071029/cbox-step-by-step

ไม่มีความคิดเห็น:

แสดงความคิดเห็น