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

หวัดดีค่ะ ทุกคน (^^)V

คิดถึงหน้าเขียนเอนทรี รู้สึกไม่ได้เข้ามานาน 555....... (= =")

ไม่ได้เขียนเรื่องเกี่ยวกับแต่งบลอคมานานมากมาย เมื่อหลายวันที่ผ่านมา มีคนถามเรื่องการใส่กล่องคุยบนบลอค (Cbox หรือ ShoutBox) ติด ๆ กันหลายคน หลายคนยังงง ๆ ว่าจะใส่ผ่าน Custom Code (ฟีเจอร์ใหม่ของ exteen) ยังไง ขอบคุณเวบมาสเตอร์ที่ต่อไปนี้ไม่ต้องมานั่งตัดโค้ดให้ตาลายอีกแล้วค่ะ วิธีทำง่ายมาก

1. อ่านเอนทรี วิธีการใส่กล่องคุยในบลอค หรือ Cbox Step-by-Step ก่อนค่า ทำจนถึงข้อ 6. คือได้โค้ดมาแล้ว โค้ดหน้าตาแบบนี้

.

2. ไปที่ Manage --> Theme --> Widgets แล้วเลื่อนลงไปดูข้างล่างตรง Available Widgets จะเห็นกล่อง Custom Code 1 2 3 4 ดังรูปค่ะ

.

3. เอาเมาส์คลิกค้างไว้ที่กล่อง Custom Code อันไหนก็ได้ค่ะ แล้วลากไปใส่ที่ Sidebar ค่ะ

.

4. กดที่รูปดินสอในกล่อง Custom Code ที่เราเพิ่งเอาไปใส่ใน Sidebar จะมีหน้าต่างเล็ก ๆ ขึ้นมา เอาโค้ด Cbox ที่ได้จากข้อ 1. ใส่ลงไปในหน้าต่างนั้น แล้วกดปุ่ม OK ดังรูปค่ะ

.

5. ขั้นตอนนี้สำคัญมาก !!! ... อย่าลืมกดปุ่ม Save ตรงมุมขวาล่างของหน้าเวบด้วยค่า (>_<)

.

เสร็จแล้ว เย้ ไม่ต้องแก้โค้ดเลย คลิกๆๆ drag n' drop ก็ได้แล้ว กล่องคุย :D ลองไปอ่านที่เวบมาสเตอร์เขียนเกี่ยวกับ Custom Code ได้ที่เอนทรีนี้ค่ะ ฟีเจอร์ใหม่ ๆ by webmaster

โค้ดอื่น ๆ ที่ไม่ใช่กล่องคุย ก็ใส่แบบนี้เหมือนกันนะคะ เช่น โค้ดตัวนับสถิติ, โค้ด widgets จากเวบต่าง ๆ เจนเนสซ่าก็ใส่ไว้อันนึง ไว้ดูรูปแมวเหมียว ^^

*** เพิ่มเติม ***

จากคอมเมนต์ของ [Mr.O] ข้อจำกัดของ Custom Code ก็คือ จะใส่โค้ดได้ไม่เกิน 2000 ตัวอักษรค่ะ ถ้ายาวกว่านั้นก็ต้องตัดแต่งพันธุกรรมโค้ดนิดนึงค่ะ (ชอบคำนี้จัง 55) อาจจะลบที่เป็นคอมเมนต์ออก ลบเครื่องหมายคำพูด (") ออกบ้างบางตัว เพื่อให้ไม่เกิน 2000 ตัวอักษร

ปุจฉา: แล้วจะรู้ได้ไงว่าโค้ดเกิน 2000 ตัวอักษรรึป่าว ?

jennessa: นั่งนับ.... (= =") หรือเอาโค้ดไปนับตัวอักษรได้ที่ http://www.lettercount.com/ หรือลอง google คำว่า 'character count' จะมีหลายเวบให้เลือกเหมือนกันค่ะ

............

อาทิตย์หน้าเจนเนสซ่าจะสอบแล้วค่ะ เผลอแป๊บเดียวก็ผ่านไปหนึ่งเทอมแล้ว เวลาผ่านไปอย่างรวดเร็วจริง ๆ ค่ะ ขอไปอ่านหนังสือต่อ สอบเสร็จแล้วจะมาอัพใหม่ค่า (^ ^)V

หวัดดีค่า

มีคำถามจากหลายบลอค ว่าอยากมีกล่องคุยแบบบลอคเจนเนสซ่าบ้าง หรือปกติเรียกกันว่า 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 แล้วเอารหัสสีไปใส่เลย สะดวกดี :-)

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

สวัสดีค่ะ เอนทรีที่แล้วเรื่อง LOVE Tag คอมเมนต์เยอะกว่าที่คิดแฮะ 55 กลับมาเรื่องแต่งบลอคดีกว่า เคยแนะนำฟังก์ชัน ใหม่ของ Exteen 4.0 ที่ชื่อ "Page" ไปแล้ว ในเอนทรี "Page ฟังก์ขันใหม่ที่ต้องลองใน Exteen เวอร์ชันใหม่" ถ้ายังไม่รู้ว่า Page คืออะไร เข้าไปอ่านเอนทรีอันนี้ก่อนนะคะ :-)

เอนทรีนี้จะสอนวิธีการเอารูปมาใส่ในชื่อที่เราตั้งเวลาสร้าง Page น่ะค่ะ ตัวอย่างเช่น ในส่วน Page ของบลอคเจนเนสซ่า จะมีรูปดอกไม้ข้าง ๆ ชื่อเรื่องอยู่ ดังรูป (ดูข้างบนก็ได้ค่ะ)

 

 

วิธีทำง่ายมากกกก ไปดูกันเลยค่ะ

1. เตรียมรูปที่จะใช้ก่อนค่ะ โดย upload ขึ้นที่ Exteen เพื่อให้มี url ของรูปก่อน (หรือจะ upload ไว้ที่อื่นก็ได้นะ) ตัวอย่าง URL ของรูป ดังข้างล่าง

http://jennessa.exteen.com/images/155.gif

.

2. ถ้ามี Page อยู่แล้ว ก็กด Edit เข้าไปเลยค่ะ หรือในกรณีสร้างใหม่ก็ทำเหมือนกันค่ะ คือ ในหน้าเพิ่ม/แก้ไข Page ให้ดูตรง Title ที่เราเอาไว้ใส่ชื่อ Page ดังรูป เดี๋ยวเราจะใส่ code ตรงนี้

 

 

3. ทีนี้ code html ที่จะทำให้รูปแสดงก็คือ tag < img > เราก็เอา url รูป (จากข้อ 1) ไปใส่เป็น src ค่ะ ออกมาเป็นอย่างข้างล่าง อย่าลืมใส่ border="0" ด้วยนะคะ

< img src="http://jennessa.exteen.com/images/155.gif" border="0"/>

.

4. code จากข้อ 3 เหมือนเป็นตัวแทนรูปที่เราจะใช้นะคะ :D อยากให้รูปอยู่ตรงไหนของชื่อเรื่อง ก็ใส่ code นั้นลงไปในช่อง Title (รูปข้อ 2) ค่ะ สมมติว่าจะใส่รูปหน้าชื่อเรื่อง ในช่อง Title ก็จะออกมาเป็น

< img src="http://jennessa.exteen.com/images/155.gif" border="0"/> Blog Map

.

5. แล้วก็กด Publish ได้เลยค่า แค่นี้เอง

.

อันนี้ตั้งชื่อเรื่องเป็น ตอนที่ 1 แต่ยังคิดตอนที่ 2 ไม่ออกเลยค่ะ 55 เอาไว้ถ้ามีวิธีอะไรอีกแล้วจะเอามาบอกนะคะ มีคำถามก็คอมเมนต์ไว้นะ (^^)V

ปล. ** เครื่องหมาย < กับคำว่า img ตอนเอาไปใช้ให้เขียนติดกันนะคะ ในนี้เว้นวรรคไว้เพื่อไม่ให้ code โดน rip ออกไปค่ะ

เพิ่มเติมจากคุณ iPats  สามารถทำด้วย CSS ก็ได้นะคะ ตาม code ข้างล่างเลยค่า ขอบคุณมากนะคะ (^^)

#pagemenu ul li a:after {content: url("http://jennessa.exteen.com/images/155.gif");}
#pagemenu ul li a:before {content: url("http://jennessa.exteen.com/images/155.gif");}