วิธีการใส่กล่องคุยในบลอค หรือ Cbox Step-by-Step

posted on 29 Oct 2007 23:06 by jennessa in Design2

หวัดดีค่า

มีคำถามจากหลายบลอค ว่าอยากมีกล่องคุยแบบบลอคเจนเนสซ่าบ้าง หรือปกติเรียกกันว่า Cbox หรือ Shoutbox (เรียกตามชื่อเวบ :D) นั่นเอง จะต้องทำอย่างไร เจนเนสซ่าเลยว่าจะทำเป็น tutorial ไว้เลยดีกว่านะ อันนี้จะสอนวิธีใส่ code ที่เอามาจากเวบ www.cbox.ws นะคะ ใครที่จะใช้ code จากเวบอื่น ก็สามารถดูได้นะ พอได้ code มาแล้วก็ทำเหมือนกัน ~~~ Let's goooo.....

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 มาทั้งหมดเลยค่ะ

==================================================

ต่อไปจะเป็นวิธีการทำให้่ code สั้นลง จะได้ใส่ในบลอคได้นะคะ

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

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

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

==================================================

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

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

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

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

13. เสร็จแล้วววว ไปดู Cbox ในบลอคได้เล้ยยย (ยาวไปป่าวนะนี่ = =")

** ข้อ 5 ที่ให้เลือกสีอะค่ะ เจนเนสซ่าแนะนำเวบ http://www.colorsontheweb.com/colorwizard.asp ค่ะ นึกสีไม่ออกก็กดปุ่ม RANDOMIZE แล้วเอารหัสสีไปใส่เลย สะดวกดี :-)

อ่า.....ใครงงตรงไหน ก็ถามได้เลยนะคะ (^^")

Tags: cbox, chatbox, code, exteen, shoutbox139 Comments

เคยใส่ cbox อยู่นะคะ

แต่มันมีปัญหากระ ไอซีที =0=

ป.ล. พี่เจนอัพดึกจัง - -*

#1 By เฟเน่จัง© on 2007-10-30 00:48

นั่นจิ พี่ก็ลืมว่ามันเที่ยงคืนแล้ว = ="

#2 By เจนเนสซ่า on 2007-10-30 00:50

Fav. ผมมันเอ๋อหรือไง

ไมรีเฟรชตอนตี นึง ไม่ขึ้น

CBox โดนดวงตาพญามารไปพักนึง

เซงกันเป็นแถบ sad smile

#3 By Maxtrix™ on 2007-10-30 01:25

เป็นประโยชน์มากเลยค่ะ
จะลองเอาไปใส่ใน blog บ้าง

#4 By londoneye on 2007-10-30 02:45

กำลังต้องการอยู่พอดีเลยครับคุณ Jennessa แบบว่าสมัครไปแต่ยังลงไม่เป็น

#5 By ก๋อง *~*$treet English *~* on 2007-10-30 02:54

ขอบคุณที่เอามาแบ่งปันนะคะ

#6 By ~CoNCh~（￣３￣） on 2007-10-30 07:20

#7 By :: ipup :: on 2007-10-30 08:16

แต่ Cbox จะพิมพ์ข้อความในช่อง text ยาก
ต้องหลอก โดยเอาเมาส์ไปคลิกที่ช่อง email ก่อน
ถึงจะคลิกได้อ่ะครับ ไม่แน่ใจว่ามันเป็น Bug รึปล่าวครับ

#8 By แพนด้าญี่ปุ่น on 2007-10-30 08:19

กำลังอยากได้เลยคะ

ขอบคุณนะคะ confused smile

#9 By หนูกระปุกตั้งฉ่าย on 2007-10-30 08:28

ผมว่าพอเอามาใส่ตรง Links แล้วมันแคบไปอ่ะครับ
แต่ถ้ามี ก็ดีกว่าไม่มีนะครับ

#10 By AkE on 2007-10-30 08:59

อยากลองใส่บ้าง
ไว้ว่าง ๆ จะลองทำค่ะ big smile

#11 By Fein on 2007-10-30 09:43

*-*
ขอบคุณมากครับคุณเจนเนสซ่า
แม้ผมจะมองไม่เห็นว่าหากผมใส่เจ้านี่ลงบล็อกผมแล้ว
จะมีใครมาคุยกับผมบ้าง
แต่เป็นสิ่งที่สร้างสีสันให้กับบล็อกได้ดีจริงๆครับ
ดูอบอุ่น เป็นกันเองครับ
big smile

#12 By ::poompuien:: on 2007-10-30 10:01

ของผมใช้ shout mix มีอยู่พักนึงโดน ICT บล๊อก ไม่รู้ด้วยสาเหตุอะไร พาลเอาเซ็งไปเลย

#13 By เจ้าชายน้อย on 2007-10-30 10:09

ตอบคุณแพนด้า
- ใช่เลยอะค่ะ จนตอนนี้ก็ยังไม่รู้ว่าทำไม embarrassed

ตอบคุณ poompuien
- บลอคคุณ poompuien มีคนคุยด้วยอยู่แล้วค่า หายห่วงเลย

ตอบพี่เจ้าชายน้อย
- ยังไม่เคยโดนนะคะ ของ shoutmix ก็น่าใ้ช้เหมือนกัน big smile

สำหรับทุกคอมเมนต์ ขอบคุณนะค้า cry

#14 By เจนเนสซ่า on 2007-10-30 10:53

ใส่ได้แล้วค่ะ เย้ๆ ขอบคุณมากนะคะ confused smile

#15 By Bowajung on 2007-10-30 11:42

จะลองทำตามที่สอนดูนะค่ะ

ขอบคุณค่ะสำหรับการแนะนำค่ะ

#16 By ~pimmas~ on 2007-10-30 13:46

> < เด่วเอาไปใส่บ้างก๊าบบบ ว่าแต่เจ้า ซีบอกซ์ มันไม่ Support IE หรองับ TT^TT

#17 By ::. S2 AngeL .:: on 2007-10-30 14:15

Support จ้า เห็นทั้งใน Firefox และ IE นะจ้ะ big smile

#18 By เจนเนสซ่า on 2007-10-30 14:24

^ อ๋อ คับ ได้แล้ว แต่ทำไม ใน IE เวลากดช่อง Message ก่อนจะไม่สามารถพิมได้อะงับ

#19 By ::. S2 AngeL .:: on 2007-10-30 14:30

ขอบคุณมากคะ confused smile

น่าลองใส่ดู

#20 By RangikU on 2007-10-30 15:23

ขอบคุณงับ ตอนนี้ไม่มีปันหาอะไรแล้วงับ ^ ^

#21 By ::. S2 AngeL .:: on 2007-10-30 15:36

แต่ก่อนเริ่มใหม่ๆ ผมลองเอามาใส่เป็นกลุ่มแรกๆเลยล่ะครับแล้วก็ไม่มีวิธีใส่ เอาเป็นแบบว่าสุ่มใส่ไปเรื่อยๆ ลองมั่วไปเรื่อยๆ ก็ปรากฏว่าได้ซะอย่างนั้น มาดูแบบนี้ก็ง่ายหน่อยครับ คนรุ่นต่อมาก็จะได้เอาไปใช้กันเยอะๆ 55+

#22 By นายฉิม on 2007-10-30 16:02

ขอบคุณมากเจ้าคะ..
จะได้ใช้ได้เสียที double wink

#23 By †:.Sesary.:† on 2007-10-30 16:36

ขอบคุณมากๆ ค่ะ

ไว้จะลองไปหัดทำบ้างค่ะ big smile

#24 By ลูกหนูสีชมพู on 2007-10-30 16:49

เป็นกราฟฟิค ดีไซน์ ที่ห่วยเรื่องพวกนี้อย่างแรงเลยค่ะ ขอบคุณมากเลยค่ะ big smile

..
แล้วก็ขอบคุณสำหรับกำลังให้คนเลี้ยงหนอนด้วยนะคะ big smile

#25 By pui@phangan on 2007-10-30 17:26

เคยใส่ แต่มีเกรียนโพสด่าเต็มเลย
ทำไงดี

#26 By Catkun on 2007-10-30 17:45

ต้องลองซะหน่เอย ถ้าทางจะแต่งง่ายกว่าของ shotmix แฮะ (รึปล่าว) sad smile

#27 By หมีขั้วโลก™ on 2007-10-30 19:07

อ่า
ของเราแบ่งโค้ดเปน2ส่วนแร้วอ่า
แต่ว่าพอใส่ลงไป
มันจะเปนแค่กล่องขาวๆ
แร้วก้อไม่มีเนื้อหาในบล๊อกอ่า
สาเหตุมาจากอารัยคะ embarrassed

#28 By fAii's darkside on 2007-10-30 19:16

ขอบคุณค่าที่นำมาบอก เพื่อเอามาใส่เล่นบ้าง confused smile

#29 By cha_o_chan on 2007-10-30 19:59

ขอบคุณมากเลยครับ
ไว้ว่างๆจะลองดูนะครับ ^^

มีปัญหาที่สกอลบาร์อยู่น่ะครับ

#30 By ◄KAPOOK•KUN►MagisteR on 2007-10-30 20:32

ตอบ moonlight13 ตอนแรกมันจะเป็นกล่องขาว ๆ ว่าง ๆ ก่อนนะคะ เพราะยังไม่มีข้อความที่ส่งเข้ามาคุย surprised smile

ตอบ Kapook-Kun ใน css มีโค้ด javascript อยู่รึป่าวคะ ลบออกก่อนนะคะ เพราะมันจะทำให้ css error ค่ะ

#31 By เจนเนสซ่า on 2007-10-30 21:33

แล้วถ้าใส่ลงบลอค จะทำให้โหลดบลอคช้าลงรึเปล่าครับ?
เพราะ นิสัยผมเป็นประเภทต้องไปตอบคอมเม้นที่บลอคเจ้าของคำถาม
เป็นเหตุให้เกิดคอมเม้นร่ายยาว..... - -"
เลยคิดว่าถ้าใส่เจ้านี่ลงไป ไว้ตอบคอมเม้นแทน
ก็น่าจะดี - -" ครับ

#32 By ~*๐บุษบาไร้พ่าย๐*~ on 2007-10-30 21:35

ผมได้ลองๆ ทำดูแล้ว
ปรากฏว่าได้ C-Box
แต่ Entry ที่เขียนเอาไว้ในหน้าแรกของบลอคหายหมดเลยครับ พอถอด C-Box ออก Entry ที่เขียนไว้ก็กลับมาเหมือนเดิม
ไม่ทราบว่าเป็นอะไรน่ะครับ embarrassed

#33 By CHAN on 2007-10-30 21:51

footer ของพายกลับมาแล้ว ขอบคุณคุณเจนมากค่ะ big smile

#34 By p-i-e on 2007-10-30 22:17

เจ๋งคับ ขอบคุณครับผม double wink

#35 By plynoi แว่วศรี on 2007-10-30 22:30

ตอบ บุษบาไร้พ่าย มันจะช้าขึ้นนิดเดียวเองค่ะ ตั้งแต่ใช้มาพี่ว่าคุ้มนะ ไว้ตอบคำถามหรือบลอคอื่นมาถามคำถามด้วย สะดวกดี :)

ตอบ CHAN ลองส่ง code มาให้เจนเนสซ่าดูได้นะคะ ทาง ems. ที่เนื้อหาเอนทรีหายไปน่าจะเพราะ code อาจจะถูกตัดไปค่ะ

surprised smile

#36 By เจนเนสซ่า on 2007-10-30 22:32

ขอบคุณมากๆเลยค่ะ เดี๋ยวจะลองเอาไปลงดูนะคะ

#37 By พระนางออกโรง on 2007-10-30 23:10

เย้ดีใจจัง blog เราดูเก๋ขึ้นเยอะเลย ขอบคุณมากนะคะที่แนะนำ
แต่พอลงเสร็จ ตัวหนังสือในบล็อคก็หายไปหมดเลยค่ะ
เป็นเพราะอะไรหรอคะ

#38 By Grammarman on 2007-10-30 23:33

อันนี้คือโค้ดแบบเต็มๆ นะครับ (ให้คุณเจนเนสซ่าตัด เดี๋ยวกลัวตัดผิด ^^) ตะกี๊ส่งมาให้ทาง Ems แล้ว แต่มันบอกว่าข้อความยาวเกิน 1000 ตัวอักษร .... จะส่งแบบเต็มรึแบบตัดมันก็บอกว่ายาวเกินน่ะครับ เลยส่งไม่ได้ งงจัง

ยังไงก็ขอความกรุณาด้วยนะครับ


<div align="center" id="cboxdiv">
<iframe frameborder="0" width="150" height="125" src="http://www4.cbox.ws/box/?boxid=3029319&boxtag=4842&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe><br/>
<iframe frameborder="0" width="150" height="75" src="http://www4.cbox.ws/box/?boxid=3029319&boxtag=4842&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe>
</div>

#39 By CHAN on 2007-10-31 11:53

^
^
^
อ่า... ส่งมาให้ทาง ems แล้วนะครับ ตอนเช้าส่งไม่ได้ ตอนนี้ส่งได้แล้ว

ขออภัยที่ส่งหลายทีไปหน่อยนะครับ

#40 By CHAN on 2007-10-31 15:02

ไม่เป็นไรค่า ตอบกลับแล้วนะคะ :)

คุณ Grammarman คะ เนื้อหาหายไปเพราะ code ที่ใส่ยาวเกินไปรึป่าวคะ ลองส่ง code มาให้เจนเนสซ่าดูได้นะคะ ทาง ems. ค่ะ surprised smile

#41 By เจนเนสซ่า on 2007-10-31 19:05

โทษนะคะ ทำตามทุกจันตอนแล้ว คือว่าใส่cboxไม่ได้อ่ะค่ะ มีปัญหาขั้นตอนใส่link code ครั้งที่สอง มันยังยาวไปอยู่ ทำให้พอแสดงผล มันเขียนเป้น error อะไรสักอย่าง angry smile

แล้วข้อความเนื้อหาของblog ก็โล่งๆอ่ะค่ะ ไม่ทราบว่าต้องทำไงอ่ะคะ กำลังมึนได้ทีเลย แต่ก็ขอบคุณค่ะ มีประโยชน์มากๆเลย confused smile

#42 By OC on 2007-11-01 10:14

<div align="center" id="cboxdiv">
<iframe frameborder="0" width="160" height="305" src="http://www2.cbox.ws/box/?boxid=1619730&boxtag=7737&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#000000 1px solid;" id="cboxmain"></iframe><br/>
<iframe frameborder="0" width="160" height="75" src="http://www2.cbox.ws/box/?boxid=1619730&boxtag=7737&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#000000 1px solid;border-top:0px" id="cboxform"></iframe>
</div>


--โทษนะคะ ส่งems ไม่เป็น รบกวนดูให้หน่ยนะคะ
พอตัดแล้วได้แบบนี้ถูกหรือเปล่าคะ??

<iframe frameborder=0 width=160 height=305 src="http://www2.cbox.ws/box/?boxid=1619730&boxtag=7737&sec=mainmarginheight=2marginwidth=2 scrolling=autoallowtransparency=yes name=cboxmainstyle="border:#0000001px solid;"id=cboxmain></iframe>

<iframe frameborder=0 width=160 height=75 src="http://www2.cbox.ws/box/?boxid=1619730&boxtag=7737&sec=formmarginheight=2 marginwidth=2scrolling=noallowtransparency=yes
name=cboxformstyle=border:#0000001px solid;border-top:0px id=cboxform></iframe>

#43 By OC on 2007-11-01 10:21

ทำแล้วค่ะ มันว่างเปล่า ไม่มีอะไรเลยค่ะ

ต้องทำยังไงบ้างค่ะ

ปล. ขอบคุณล่วงหน้าค่ะ big smile

#44 By ลูกหนูสีชมพู on 2007-11-01 11:53

ตอบ orangechocolate

<iframe frameborder=0 width=160 height=305 src="http://www2.cbox.ws/box/?boxid=1619730&boxtag=7737&sec=main" marginheight=2 marginwidth=2 scrolling=auto allowtransparency=yes name=cboxmain style="border:#0000001px solid;" id=cboxmain></iframe>

<iframe frameborder=0 width=160 height=75 src="http://www2.cbox.ws/box/?boxid=1619730&boxtag=7737&sec=form" marginheight=2 marginwidth=2 scrolling=no allowtransparency=yes name=cboxform style="border:#0000001px solid;border-top:0px;"></iframe>

ลองเปรียบเทียบดูว่าเจนเนสซ่าแก้ตรงไหนนะคะ ถ้ายังใส่ไม่ได้แวะมาใหม่นะ

#45 By เจนเนสซ่า on 2007-11-02 17:10

ตอบ ลูกหนูสีชมพู ส่ง code มาให้ดูหน่อยค่า surprised smile

#46 By เจนเนสซ่า on 2007-11-02 17:11

ทำได้แล้วค่ะ ขอบคุณมากมาย
จุ๊บๆๆๆ บลอคเราดูหรูขึ้นเยอะเร่ย คัมซาฮัมนีดา

#47 By OC on 2007-11-02 22:02

ขอบคุณสำหรับความรู้นะคะ น่าสนใจค่ะ
ดีจังมีความรู้แล้วมีน้ำใจมาแบ่งกันเนอะ

#48 By aMy on 2007-11-03 00:20

#49 By ลูกหนูสีชมพู on 2007-11-03 10:06

โค้ดมีสองส่วนนะคะ อันที่ส่งมาน่าจะเป็นโค้ดส่วนแรก แก้เป็นแบบนี้นะ

<iframe frameborder=0 width=160 height=305 src="http://www.cbox.ws/box/?boxid=980329&boxtag=3503&sec=main" marginheight=2 marginwidth=2 scrolling=auto allowtransparency=yes name=cboxmain style="border:#48515A 1px solid;" id=cboxmain></iframe>

เพิ่มเว้นวรรคระหว่างแต่ละค่านะคะ โค้ดอีกส่วนก็ทำแบบเดียวกันนะ ลองเอาไปเปรียบเทียบดู open-mounthed smile

#50 By เจนเนสซ่า on 2007-11-03 11:03

Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

Pages