สำหรับคนที่มี Code แบบใหม่ เท่านั้น หากบล็อกท่านใช้โค้ดแบบเก่า กรุณาข้าม entry นี้เจ้าค่ะ

 

 

 

วิธีดู

 

 

 

ห่างหายจากการเขียนเรื่องเกี่ยวกับ Code Exteen มาร่วมครึ่งปีได้แล้วมั้ง วันนี้กลับมาพร้อมกับการอธิบายเรื่องการทำกล่องคอมเม้น (Comment box) ให้สวย ๆ ค่ะ

อย่างน้อยที่สุดเวลาที่คนจะตอบเราในบล็อก มันก็ต้องมีบางสิ่งที่ดึงดูดและเข้ากันกับความเป็นบล็อกของเรา (โอ้วว หรู ไฮ-โซ้วว~)อยู่บ้าง

 

แต่หลาย ๆ คนก็มักจะมีปัญหากับกล่องคอมเม้น อย่างเช่น มันดูพื้น ๆ เกินไป หรือบล็อกบางคน (หนึ่งในนั้นก็สดล่ะ) เปิดใน firefox แล้วพอจะตอบคอมเม้น รูปที่ใส่ในกล่องคอมเม้น มันกระเด็นขึ้นมาหัวบล็อกซะฉิบ วันนี้จะแนะนำพื้นฐานการเขียนกล่องคอมเม้นไว้ตรงนี้แล้วกันค่ะ

 

ก่อนอื่นดูรูปนี้กันเลย

  

จะอธิบายทีละอันนะคะ (ส่วนที่สดไม่กล่าวถึง แปลว่าไม่ต้องยุ่ง ไม่ต้องสนใจแล้วทุกอย่างจะดีเองค่ะ) 

1.    #commentform ส่วนนี้เป็นส่วนโครงสร้างของทั้งกล่องค่ะ มีค่าที่เราสามารถกำหนดได้ดังนี้

o      width: ความกว้าง ใส่เป็น%หรือเป็นจำนวน px เช่น 400px ประมาณนี้เป็นต้นก็ได้ค่ะ (อย่าลืมต่อท้ายด้วย ";" ด้วยนะคะ

o      นอกจากนี้เราอาจใส่คำสั่ง height:(ใส่%หรือจำนวนpx)ด้วยก็ได้เช่นกันค่ะ แต่ถ้าใครเอาง่ายเข้าว่าก็ไม่จำเป็น

o      background: ส่วนนี้คล้าย ๆ กับส่วน background ที่เราเคยอธิบายในการทำ header ค่ะ แต่ยกยอดมาอีกครั้งก็แล้วกัน

§       url (...) ในวงเล็บ ให้ใส่ url รูปที่เราต้องการ

§       no-repeat(Set การปูซ้ำ ในตัวอย่างคือ เราไม่ต้องการปูซ้ำ แต่ถ้าอยากปู สามารถเปลี่ยนเป็นคำว่า repeat(ปูซ้ำทั้งหมด), repeat-x(ปูซ้ำแนวนอน), repeat-y(ปูซ้ำแนวตั้ง) อย่างใดอย่างหนึ่งได้ แต่จะให้ผลต่างกัน)

§       top left (ตำแหน่งในการวาง) ตรงนี้สำคัญมากและคิดว่าต้องบังคับให้ระบุเช่นนี้เพิ่มด้วย ไม่เช่นนั้น เวลาเราใส่รูปลงกล่องคอมเม้น แล้วคนอื่นใช้ firefox เปิดบล็อกของเรา รูปที่เราใส่ใน url(...)ตอนแรกจะกระเด็นขึ้นมาหัวบล็อก น่าเกลียดขึ้นมาเลย (ขอบคุณ Yunasung สำหรับโค้ดที่ส่งมาให้สดวิเคราะห์สาเหตุนะคะ ขอบคุณมากค่ะ)

o      border ส่วนเฉพาะบรรทัดนี้ หากใครต้องการใส่เส้นขอบกล่องคอมเม้นเรา(แล้วแต่จะสร้างสรรค์กันค่ะ) ก็สามารถเขียนตรงส่วนนี้เพื่อทำเส้นขอบ โดยที่

§       -style: ส่วนนี้เราสามารถใช้คำต่าง ๆ เพื่อกำหนดลักษณะเส้นขอบที่ต้องการค่ะ ซึ่งคำที่สามารถใช้เพื่อกำหนดเส้นขอบได้มีดังนี้ค่ะ : Dashed, dotted, Solid, Groove, Inset, Outset  ,Ridge, double (คำทั้งหมดที่กล่าวมานั้นเป็นคำที่ใช้เขียนเส้นกรอบใน hi5 ซึ่ง hi5 มีการใช้ภาษา css เพื่อตกแต่งเหมือนกัน ซึ่งสดไม่แน่ใจเหมือนกันว่านอกจาก 3 คำแรกแล้ว คำที่เหลือจะใช้ใน exteen ได้ด้วยไหม? เพราะสดไม่เคย และไม่ชอบใส่^^)

§       -width: ส่วนนี้ให้ใส่ความหนาของเส้นกรอบที่เรากำหนดข้างต้น เป็นจำนวนpx

§       -color: #(โค้ดสี 6 หลัก) ถ้าไม่ใส่ เส้นกรอบที่เรากำหนดจากข้อข้างต้นจะกลายเป็นสีดำค่ะ

2.    #commentform h3 ส่วนนี้สำหรับกำหนดค่าคำว่า "Comment" ที่อยู่ตรงมุมบนซ้ายของกล่องคอมเม้นเราค่ะ มีรายละเอียดดังนี้

o      font-size: กำหนดขนาดตัวอักษรเป็นจำนวนpxค่ะ

o      color:#(โค้ดสี 6 หลัก) กำหนดสีอักษรค่ะ(เพราะตรงนี้มีแต่อั