สวัสดีค่ะ บลอคนี้เป็นตอนที่ 2 ของการใส่ลูกเล่นให้ช่อง comment นะคะ ซึ่งในตอนที่ 1 ได้อธิบายเกี่ยวกับการใส่ background ให้กับช่องใส่ comment สามารถดูได้ที่นี่ค่ะ Click

กรอบของช่องใส่ comment จาก default theme ของ exteen ส่วนใหญ่จะเป็นรูปสี่เหลี่ยม กรอบเป็นเส้นประ หรือเส้นทึบ แล้วแต่ theme ที่เลือก แต่วันนี้เราจะมาเดินออกนอกกรอบกันค่ะ :D

วิธีทำค่ะ

1. เตรียมรูป BG ที่จะนำมาทำเป็นกรอบก่อนนะคะ ซึ่งจะเป็นรูปใหญ่รูปเดียว ตัวอย่างรูปที่เจนเนสซ่าเตรียมไว้ ดังข้างล่างค่ะ

รูปที่จะนำมาทำเป็น background

รูปขนาด 400 x 200 pixelsโดย Jennessa

.

2. นำรูปไปฝากไว้ที่เวบรับฝากไฟล์ เพื่อให้ได้ URL ของรูปมาก่อนนะคะ หรือจะเก็บไว้ที่ exteen ก็ได้ค่ะ ดูวิธีการ upload รูปขึ้น exteen ได้ที่นี่ค่ะ Click ตัวอย่าง URL ของรูป

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

.

3. ไปที่ แก้ไข CSS ด้วยตัวเอง แล้วหาคำว่า form ค่ะ จากนั้นให้ คอมเมนต์ส่วนที่เป็น border ออก หรือจะลบออกไปเลยก็ได้ค่ะ แต่คอมเมนต์ไว้ดีกว่า เผื่อเปลี่ยนใจกลับมาแก้นะคะ คอมเมนต์โดยใส่ /* */ ปิดหัวท้ายค่ะ ทำแบบนี้เพื่อเอากรอบเดิมของช่องใส่ comment ออกดังตัวอย่างข้างล่างค่ะ

form {
padding:6px 5px 2px 20px;
margin:10px;
/*border:1px dotted #CCCCCC;*/
/*border-left:10px solid #CCCCCC;*/
font:11px Tahoma,"MS Sans Serif";
background-image: url(
http://jennessa.exteen.com/images/commentbg7.gif);
background-repeat: no-repeat;
width: 400px;
height: 200px;
}

มาดู attribute ที่เราจะเซตค่ากันค่ะ

  • background-image: ใส่ URL ของรูป BG
  • background-repeat: ใส่ no-repeat เพื่อให้พื้นหลังเป็นรูปใหญ่รูปเดียว
  • width: ใส่ความกว้างของรูป BG หรือมากกว่า
  • height: ใส่ความสูงของรูป BG หรือมากกว่า

ค่า width และ height ถ้าใส่น้อยกว่าความกว้างและสูงของรูป BG จะทำให้เวลาแสดงผลจะเห็นรูป BG ไม่เต็มรูปค่ะ ดังนั้น จึงควรใส่ให้เท่ากับหรือมากกว่า

.

4. ถ้าตัวอักษรอยู่ชิดกรอบมากเกินไป ให้ลองปรับค่าที่ padding: ดูค่ะ

เสร็จแล้วค่ะ เพียงแค่นี้ ช่องใส่ comment ก็สามารถมีกรอบได้หลากหลายแบบ ทีนี้ก็ขึ้นอยู่กับการออกแบบกรอบของแต่ละคนแล้วล่ะค่ะ เจนเนสซ่าไม่ค่อยมีหัวด้านดีไซน์เท่าไหร่ เลยไม่รู้จะแนะนำยังไง ตัวอย่างเลยทำได้แค่อันเดียวดังข้างล่างค่ะ (^ ^)"

Jennessa's Comment Background

Comment

Comment:

Tweet

อ้ากกกกก

ขอบคุณค่ะๆๆๆ เรามือใหม่คงต้องศึกษาให้มากจากที่นี่

#21 By hambaster on 2007-03-02 21:15

แหม .... เกือยเผลอคอมเม้นท์ ช่องด้านบนแล้วสิ

#20 By !2know ++ on 2007-03-02 16:08

555 และแล้ว พ่อหมีก็เข้าอันผิดเหมือนกัน 555
นี่แหละน้า.. แก่แล้วชักเริ่มเบอ....

#19 By ปู่หมี on 2007-03-02 12:31

มีของน่ารักๆ มาฝากกันอีกแล้ว

ปล.ขอบคุณสำหรับคำอวยพรวันเกิดนะคะ

#18 By GOPGAP on 2007-03-02 11:14

ทามมายมานม่าขึ้นง่า ><

#17 By Yamashita Kawamura on 2007-03-02 09:53

น่ารักมากค่า~~
ดูมีสาระมากเลย ไม่เหมือนเรา 55+
ขอแอดน้าคะ
มีประโยชน์จังเลย
ชอบค่า 5 ดาว เย้ๆ

#16 By CottonBB on 2007-03-01 00:09

น่ารักดีจ้ะ

ปล. แต่ทำไม IE ของเราแสดง ปุ่ม comment ตกกรอบไม่เหมือนในรูปที่ jennessa capture มาให้ดูอ่ะ เราใช้ IE 6 resolution จอเป็น 1024 x 768

ปล. ชอบรูปคาคาชิจัง

#15 By naruto (58.9.190.14) on 2007-02-28 22:47

บลอกสวยยยย
ชอบ
ขอแอดไว้ละกันนะคะ
งื่มๆๆๆ
ความรู้ใหม่
เดี๋ยวขอเอาไปทำม่าง
ไงก้อขอบคุนน้อ

#14 By f a z - r e n h e i t * on 2007-02-28 08:49

อ้อใช่มีคำถามนะคะ

ถ้าจะเปลี่ยนscor barต้องทำยังไงอะคะ

แล้วก็บอกเว็บหาโค้ดในการทำสกอร์บาร์มาด้วยจะขอบคุณมากๆเลยค่ะ

#13 By Eámanë of Shadowless on 2007-02-27 21:52

อ๊ากกเจนเนสซ่าอัพบล็อคมีสาระมากมายอีกแล้ว

เด๋วไว้จะเอามาใช้นะคะ

กี๊ด ขอบคุณมากๆเลยค่ะ

#12 By Eámanë of Shadowless on 2007-02-27 21:51

555 ขอโทษที่ทำให้เข้าใจผิดค่ะ

ขอบคุณทุกคนที่เข้ามาดู... ดีใจ

เหมือนเดิม มีคำถามโพสท์ไว้ได้นะคะ

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

ขอบคุณคุณเจนเนสซ่ามาๆเลยนะคะที่แวะไปเยี่ยมบลอคของแมว ดีใจมากๆเลยค่ะเพราะว่าคุณเป็นคนแรกที่เข้ามาคุยกัน นึกว่าจะไม่มีใครเข้ามาเยี่ยมเสียแล้ว
คราวหน้ามีเวลาว่างก็เชิญแวะมาคุยกันบ่อยๆนะคะ

ขออนุญาตแอดบลอคด้วยค่ะ

#10 By a lass and her umbrella on 2007-02-27 15:06

ขอบคุณคุณเจนเนสซ่ามาๆเลยนะคะที่แวะไปเยี่ยมบลอคของแมว ดีใจมากๆเลยค่ะเพราะว่าคุณเป็นคนแรกที่เข้ามาคุยกัน นึกว่าจะไม่มีใครเข้ามาเยี่ยมเสียแล้ว
คราวหน้ามีเวลาว่างก็เชิญแวะมาคุยกันบ่อยๆนะคะ

ขออนุญาตแอดบลอคด้วยค่ะ

#9 By a lass and her umbrella on 2007-02-27 15:02

เด๋วไปลองทำดีก่า

#8 By ^__^ต้นตาล^0^ on 2007-02-27 10:54

เด๋วไปลองทำดีก่า

#7 By ^__^ต้นตาล^0^ on 2007-02-27 10:54

ขอบคุณค่ะกรอบคอมเม้นท์น่ารักจังเลย

#6 By eeddy(อี๊ด) on 2007-02-27 09:42

เจ๋งงง.......อ่ะ

ไว้จะทดลองกับของตัวเองมั่ง
ขอบคุณมากๆ เลยนะคะ บลอคดีๆ แบบนี้

#5 By ~ :: SuPer M i l K y :: ~ on 2007-02-27 09:22

ผมก็เผลอเหมือนกัน
ขอบคุณมากที่แนะนำจะลองไปทำดู

#4 By นายบวก on 2007-02-27 08:37

555 เมื่อกี้ เผลอจะไปพิมพ์ คอมเม้นท์ ช่องข้างบน แต่ ...เอ ทำไมพิมพ์ไม่เข้า
อ่อ .. มันผิดอัน
แล้ว จะทดลอง ออกนอกกรอบ (ไม่ใช่นอกลู่นอกทาง )
.
ขอบคุณครับสำหรับวิธีการดีๆ

#3 By (¯`•¸®·neo590·) °´¯)* on 2007-02-27 08:26

โอ้ว วิธีดีๆ ขอบคุณนะครับ

#2 By r i j e -[a x k i z e l] on 2007-02-27 00:47

ขออนุญาต แอดนะคะ