เราสามารถตกแต่งส่วนต่าง ๆ ของช่องใส่ comment ได้ด้วยการแก้ไข CSS นะคะ บลอคนี้เป็นตอนที่ 1 ว่าด้วย การเล่นกับ background ค่ะ

จากช่องใส่ comment พื้นขาวธรรมดา ๆ เราสามารถใส่ background น่ารัก ๆ ลงไปได้นะคะ มาดูวิธีการทำกันค่ะ

1. เตรียมรูปที่จะนำมาทำเป็นBG ก่อน เราขอแบ่งรูปที่จะนำมาทำBG เป็นสองแบบนะคะ ได้แก่

  • รูปที่เป็น Pattern คือ รูปเล็ก ๆ ที่จะนำมาต่อกันซ้ำ ๆ เป็นBG เช่น

  • รูปใหญ่รูปเดียว ขนาดใกล้เคียงกับช่องใส่ comment เช่น

อย่าลืมนำรูป upload ขึ้นเวบฝากรูปเพื่อให้ได้ URL ของรูปมาก่อนนะคะ

.

2. ไปที่ แก้ไข CSS ด้วยตัวเอง แล้วหาคำว่า form ดังข้างล่างค่ะ

form {
padding:2px 5px 2px 20px;
margin:10px;
border:1px solid #FFCC00;
font:11px Tahoma,"MS Sans Serif";
background-image: url(http://jennessa.exteen.com/images/commentbg3.gif
);
}

ถ้าของใครไม่มีคำว่า background-image ก็ให้เพิ่มไปได้เลยค่ะ ตรงที่ไฮไลท์ไว้ให้ใส่ URL ของรูปBG นะคะ

*** สำหรับคนที่ใช้ภาพใหญ่ภาพเดียวทำเป็น BG ให้เพิ่มโค้ดต่อไปนี้ลงไปใน form ด้วยนะคะ เพื่อให้รูป BG พอดีกับช่อง comment

background-repeat: no-repeat;
width: 400px; //ใส่ความกว้างให้เท่ากับความกว้างของ BG หรือมากกว่า
height: 200px; //ใส่ความสูงให้เท่ากับความสูงของ BG หรือมากกว่า

3. ถ้าต้องการกำหนดความกว้างและความสูงของช่องใส่ comment และทำให้ช่องใส่ comment ใส ให้ copy code นี้ไปใส่ใน CSS ได้เลยค่ะ

textarea {
filter: alpha(opacity=50); //ใส่ค่าได้ตั้งแต่ 0-100ยิ่งค่าน้อย ยิ่งใสมากค่ะ
width: 270px; //กำหนดความกว้างของช่องใส่ comment
height: 120px; //กำหนดความสูงของช่องใส่ comment
}

.

4. ตัวอย่างช่องใส่ comment ที่ใส่ BG เรียบร้อยแล้ว

  • BGเป็น Pattern

  • BGเป็นรูปใหญ่รูปเดียว

.

เสร็จแล้วค่ะ เพียงแค่นี้ ช่องใส่ comment ก็มีตัวการ์ตูนน่ารัก ๆ อยู่ข้าง ๆ แล้วค่ะ (^ ^)V

บลอคหน้ามาดู Trick ในการเปลี่ยนกรอบของช่องใส่ comment โดยใช้วิธีเปลี่ยน BG ค่ะ กรอบของช่องใส่ comment ก็ไม่จำเป็นต้องเป็นสี่เหลี่ยมเสมอไป :D ติดตามตอนต่อไปนะคะ to be continued...

Comment

Comment:

Tweet

#97 By สติ๊กเกอร์ไลน์ (183.89.83.82|183.89.83.82) on 2014-11-27 23:00

ขอบคุณครับ confused smile

#95 By Arm (58.10.196.8|58.10.196.8) on 2014-03-05 19:23

ขอบคุณครับ confused smile

#94 By Arm (58.10.196.8|58.10.196.8) on 2014-03-05 19:22

big smile

#93 By (113.53.25.25|113.53.25.25) on 2014-01-22 20:07

ทำได้จิงด้วย ขอบคุณครับbig smile

#92 By akadmin on 2012-06-19 20:08

มันต้องเอาโค้ดไปใส่ตรงไหนอ่ะคะ =w=;;

พอดีเพิ่งเล่นใหม่ยังไม่รู้เลย

#91 By Dreem ~ on 2011-11-03 10:15

แจ่มอ่ะcry

#89 By Amadon on 2011-10-21 09:43

ทำได้เเล้วค่า ชองมัลคัมซาฮัมนีดา Hot! Hot! Hot! Hot! Hot! Hot! double wink cry

#85 By มาย on 2011-04-06 15:50

ขอบคุณครับ

#83 By Club vip. (ufo) on 2011-03-13 10:42

ลองแล้วครับ แจ่มมากมายเลย

ขอบใจมากนะครับ สำหรับการแบ่งปัน^^

#82 By Keyboardboy on 2010-11-17 20:27

ขอบคุณค่ะ ^^

#81 By Kwantoey on 2010-11-12 00:36

จะลองทำดูนะคะ

(จะได้รึป่าวน้อ)sad smile

#79 By error page not found! on 2010-08-09 18:15

โห.....สุดยอดจะลองอีกรอบ..... Hot! Hot! Hot!

#78 By เจ้นุช on 2010-05-09 22:49

><!!~ Hot! Hot! Hot! Hot! Hot!

ขอบคุณมากค่ะ ลองทำตาม ตอนนี้บลอคดูสวยขึ้นเยอะเลยค่ะ

ขอบคุณสำหรับบทความดีๆแบบนี้นะคะ

#77 By iMerCutE'z :)* on 2010-05-06 13:45

ถ้าเป็นรุ่นใหม่ จะทำยังไงคะ

#76 By LoveLy Gam on 2010-03-09 18:32

ขอบคุณมากค่า ช่วยได้มากจริงๆ สำหรับมือใหม่อย่างเรา อิอิ open-mounthed smile

#75 By Storehouse No.26 on 2010-02-07 01:02

เราหาคำว่า form ใน css ไม่เจอเหมือนกัน

ไม่รู้ว่าเป็นเพราะว่า เราเป็น exteen เวอร์ชั่นใหม่รึเปล่า code มันเลยต่างกัน

หากใครทำได้ ก็มาบอกกันบ้างน้า.........sad smile

#74 By OFF JPK on 2010-01-06 04:41

ไจมาก

#73 By I am Ghost of Terran on 2009-11-22 16:33

ฮือๆ ไม่มีคำว่าfromอ่ะคะ หาเท่าไหร่ก็ไม่เจอ

#72 By exteen on 2009-11-08 18:53

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

#71 By MiiiN on 2009-11-05 00:19

ขอบคุณมากน้าค้าบHot!

#70 By Sagaya_Sky~* on 2009-10-11 21:35

เปนประโยชน์มากเลยครับ แต่ผมงงนิดหน่อย แหะๆ

#63 By The Sun on 2009-07-18 23:32

ขอบคุณค่ะ มีประโยชน์มากเลย ^^
แล้วจะนำไปใช้นะคะ

#62 By CHAANTH on 2009-07-17 11:39

ดูแร้วม่ายเข้าจัยงงอยู่

แต่จะพยายามทามหั้ยด้ายค่ะbig smile

#61 By มิ้นท์ (58.8.34.97) on 2009-06-25 20:05

That's Cool>_<

#60 By -:-๐[おに おにい]๐-:- on 2009-06-18 16:03

ขอบคุณที่สุดเลยคะ

ได้ความรู้จากบล็อกนี้เยอะมากเลย

กระจ่างขึ้นเยอะแนะ

#59 By [SUIKAMICKY] on 2009-01-21 23:56

ขอบคุณมากจ้ะ big smile
ได้ประโยชน์และความรู้มากมายเลย
ขออนุญาตแอดเลยนะจ๊ะ

#58 By สาวแว่น on 2009-01-17 22:06

เปลี่ยนสีตรง comment ไม่ได้ค่ะ แต่ว่ารูปมันดันขึ้นตรงที่เพื่อน ๆ คุยกันแทน เห็นว่าคำแนะนำนี้สำหรับเวอร์ชั่นเก่า มารอของเวอร์ชั่นใหม่คะ เพราะว่ามัน comment เยอะเหลือเกินค่ะ big smile

#57 By Crazyboysjr on 2008-09-19 20:33

อันนี้สำหรับ Theme เก่าน่ะค่ะ open-mounthed smile

#56 By เจนเนสซ่า on 2008-07-31 22:43

ดีค่ะ

เพิ่งเคยเข้ามาครั้งแรก

ชอบมากๆ เลยค่ะ มีเทคนิคเยอะมาก ^^

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

ชักเริ่มงง แหะๆ

#55 By JooB on 2008-07-31 22:15

ขอบคุณมากๆค่ะ
คำแนะนำกระจ่างแจ้ง
ขอบคุณอีกครั้ง

#54 By All Su on 2008-05-08 09:38

ได้แล้วค่ะๆ

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

#53 By axiahh on 2008-03-04 17:48

ขอบคุนมากๆเลยนะคะ...

ช่วยทำให้ hi5 สวยขึ้นทันตาเลย...

blog ของคุนมีประโยชน์มากๆเลยค่ะ....

#52 By └illΨ © (222.123.155.109) on 2008-02-29 16:56

ทำไมมันทำไม่ได้ง่ะ sad smile

#51 By Choudate on 2008-01-13 17:21

ขอบคุณมากๆเจ้าค่ะ ไว้จะลองทำดูน่ะเจ้าคะ

#50 By もみじ★ on 2008-01-03 18:51

จารอนะครับ

#49 By [P][o][n][g] on 2007-10-15 12:56

ยังไม่รู้เลยอะ ขอเวลาศึกษาก่อน embarrassed

#48 By เจนเนสซ่า on 2007-10-15 08:32

เวอร์ชั่นใหม่นี่ ต้องไปแก้ code ตรงไหนอะ แบบว่าเพิ่งลองทำ

#47 By [P][o][n][g] on 2007-10-15 01:14

เก่งจังเลยค่ะ..ใจดีด้วย ขอบคุณนะคะ

#46 By (124.157.152.211) on 2007-10-01 10:32

ขอบคุงนะคะ
นั่งอ่านมาหลายบล๊อคเเระ
ยังไงก้อมาเม้นให้ด้วยน้า[พึ่งทาม]

#45 By ๛๏Kyu on 2007-09-16 21:23

ขอบคุณงับ เหมาะสมสำหรับผู้ที่เริ่มต้นจิงๆ

#44 By k-tee on 2007-07-24 09:36

ได้อีกอย่างแว้ว

#43 By k-tee on 2007-07-24 09:32

ขอบคุณมากๆเลยนะคะ

ขอยืมไปใช้บ้างนะ

#42 By tararat on 2007-07-21 15:36

น่ารักมากๆเลย ขอลายนี้ได้ไม๊ค่ะ ขอบคุณมากๆคร้า

#41 By ♡..( >ö< ) on 2007-05-13 02:16

ขอบคุนน๊ะคร่ะคุณ jennessa เรียบร้อยแล้วคร่ะ
ได้แล้วๆเย้ๆ
ขอบคุนมากๆเรยคร่ะ

#40 By sanootzies on 2007-05-05 13:34

ขอบคุณมากๆเลยค่ะ
หาโค้ดฟิลเตอร์อยู่เลย
อ่า...ขอโทดน๊ธคร่ะที่ตอบช้า
นี่คร่ะ...
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif";
background-image:url
(http://sanootzies.exteen.com/images/comment.jpg);
background-repeat: no-repeat;
width: 400px;
height: 200px;
textarea{
filter:alpha(opacity=50);
width: 270px;
height: 120px;

#38 By sanootzies on 2007-04-30 00:49

คุณ sanootzies คะ ขอดูโค้ดตรง .form ทั้งหมดหน่อยค่ะ เดี๋ยวช่วยดูให้ค่ะ

#37 By เจนเนสซ่า on 2007-04-26 22:04

อ่า...ทำม่ะไดอ่า
ใส่background-repeat: no-repeat;แล้วก้ยังม่ะขึ้นเรย

#36 By sanootzies on 2007-04-26 18:40