Creative Commons License

มาแต่งธีมแจ่มๆ ให้บล็อคกันดีกว่าครับ

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

วันนี้เสนอ ตอนที่ 2 มาแต่ง comment กันเต๊อะ!

''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

อ่านตอนที่ 1 โดยเข้าทาง Tutorial ทางฝั่งซ้ายนะครับ

เริ่มแรกเรามาดูแต่ละส่วนของส่วน comment ทั้งหมดกัน

  เริ่มจากส่วนที่ 1 : กล่องใส่ข้อความ 

ส่วนนี้จะไม่ยุ่งยากนักครับ ในโค้ดดูส่วน /* Comment form */

ซึ่งจะแบ่งได้ตามภาพด้านล่าง

แบ่งตามสีต่างๆ ดังต่อไปนี้

กรอบสีแดง :  #commentform , #commentform form

กรอบสีฟ้า : #commentform h3

กรอบสีขาว : #commentform .formrow

กรอบสีส้ม , เส้นใต้สีเขียว : #commentform label

กรอบสีม่วง : #commentform input.textbox , #commentform textarea

แก้ไขกันใน {} ได้ตามสะดวกครับ หากต้องการใส่พื้นหลังแบบผม

ให้ใส่ไว้ในส่วนของ  #commentform แล้วปรับด้านในด้วย #commentform form

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

 ต่อมาส่วนที่ 2 : กล่องแสดงข้อความ 

ส่วนนี้จะยุ่งยากนิดหน่อย หากต้องการแก้ไขเพิ่มจากโค้ดที่มีมาให้

ผมขอแนะนำแบบเพิ่มเติมแก้ไขแล้วกันนะครับ

ไปดูกันในส่วน /* Comment (Showing Area) */ จากของเดิม

.comment

.comment .post

.comment .post p

.comment .info

.comment .info img

ที่ผมได้เพิ่มเข้าไปอีกคือ

.comment .post กับ .comment .info p

และเพิ่มเติมสำหรับเจ้าของบล็อคเอง .commentmanage

ซึ่งจะอยู่ด้านล่างๆ เลยในโค้ด css คือส่วน Hide Delete คอมเม้นท์นั่นเอง

จากภาพผมได้แบ่งเอาไว้ 4 ส่วนเอามาอธิบาย

1. ส่วนสีฟ้า : .comment (จริงๆ ส่วนนี้ครอบคุมตั้งแต่ 1-3)

2. ส่วนสีส้ม : .comment .post , .comment .post p (อันนี้ไม่ได้ใช้)

3. ส่วนสีเขียว : .comment .info , .comment .info img , .comment .info p

4. ส่วนสีชมพู : .commentmanage

ไปดูโค้ดแต่ละส่วนที่สำคัญกันครับ

มาทำความเข้าใจกันก่อน

ในส่วน class ที่เรานำมาเขียนในโค้ด css

ส่วนที่อยู่ภายในระหว่าง < div >...< /div >

ซึ่งจะแสดงผลตามโค้ด css นั้นๆ เช่น class="comment" คือ .comment{}

สำหรับการทำงานดูรูปกรอบสี่เหลี่ยม 3 อันซ้อนกัน

class="comment" จะครอบคุม class อื่นๆ ทั้งหมดภายในครับ

หากเราแก้ไข class="post" หรือ .post ในโค้ด ส่วนที่เป็นสีฟ้า

ก็จะแสดงผลตามโค้ดที่เราเขียนใน .post ครับ

ไปดูโค้ดกันต่อ ตามที่ได้แบ่งเอาไว้ 4 ส่วน

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

background:url(url ภาพ) no-repeat; --> ไม่ให้ภาพแสดงซ้ำ ส่วนนี้จะเป็นส่วนภาพ Local Disk C:
width:516px; --> กำหนดขนาดความกว้าง เท่ากับภาพพื้นหลัง
float:left; --> ให้ส่วน comment ชิดซ้าย
margin:15px 0px 5px 0px; --> จากขอบมา บน ซ้าย ล่าง ขวา
color:#c0c0c0; --> สีตัวอักษร

 

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .post
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

margin-top:52px; --> กำหนดให้ห่างจากขอบบนลงมา จะช่วยให้พื้นหลังส่วนนี้ไม่ภาพพื้นหลังของส่วน comment แต่ต้องกำหนดให้ห่างเท่ากับส่วนสูงของภาพพื้นหลังส่วน comment ด้วย
float:left;
width:516px;
color:#000;
display:table;
--> กำหนดแสดงแบบ table (แนะนำครับ)
background:url(url ภาพ); --> ส่วนพื้นหลัง

ทำ .comment .post เพิ่มอีกอันต่อจากอันนี้

width:490px; --> กำหนดความกว้างให้น้อยกว่าภาพพื้นหลังตามเหมาะสม
padding-left:25px; --> เลื่อนข้อความให้ออกมาจากทางซ้าย

 

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .info
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

float:left;
font-size:10px;
height:93px;
--> กำหนดความสูง เท่ากับความสูงพื้นหลัง
width:516px; --> กำหนดความกว้าง
background:url(url ภาพ) no-repeat; --> ภาพพื้นหลังส่วนสีเขียว

 

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .info img
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

display:table; --> ใช้ table เพื่อให้ภาพลงมาอยู่คนละส่วนกับ post
float:right; --> ชิดขวา
padding-right:25px; --> ห่างจากขอบขวาเข้ามา
padding-top:20px; --> ห่างจากขอบบนลงมา

 

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .info p

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

float:right;
padding-top:50px;
--> ห่างจากขอบบนลงมา

ส่วนนี้คือ # จนถึง วันที่คอมเม้นท์ (อยู่ล่างรูป avatar)

 

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.commentmanage

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

ส่วนนี้ไม่ต้องแก้ไขอะไร หรือหากต้องการแก้ก็ตามสบายเลยครับ แต่ของผมไม่ได้แก้ไข

 

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

จบแว้ว...

สำหรับคนที่ใช้ Firefox : แนะนำ Web Developer

วิธีการใช้ใน exteen มีคนเคยแนะนำไว้ ลองค้นหาดูนะครับ

-------------------------------------------------------------------

ต่อด้วยเรื่อง pages viewed ใน stats ของ exteen เมื่อวานนี้

ไม่เคยได้ตัวเลขพุ่งขนาดนี้มากก่อน - -" แต่มันไม่ดีใจเลยเฟ้ย!!

เลขพุ่งเยอะ แต่ comment สิ........ comment กันบ้างเซ่!!!

edit @ 3 Dec 2008 09:38:26 by +{= r i j e =}+

Comment

Comment:

Tweet

คอมเม้นท์งับๆ คอมเม้นท์ อิอิ

รักบล็อคนี้มากมาย อ่านแล้วสบายตาค่ะ ได้ความรู้อีก ชอบๆ

#36 By grammarman on 2011-09-02 21:29

ขอโทษค่ะมือใหม่ อ่านดู ก็เหมือนจะเข้าใจค่ะ แต่ก็หาที่จะเพิ่มไม่เป็นอะค่ะ
ขอถามหน่อยค่ะ คือไม่รู้จริงๆ
1. เอา code ไปวางตรงไหนค่ะ ใน CSS หรือ comment
2. เป็นการสร้างขึ้นใหม่ หรือเข้าไปหาแก้ในส่วน CSS ที่มีอยู่แล้ว (กรณีใส่ใน CSS)
3. ใส่ใน comment ใส่ยังไงเหรอค่ะ หาที่จะใส่ไม่เจออะค่ะ T^T
คือทั้งหมดนี้ใช่เข้าไปที่ Theme => แก้ไข => แล้วเมนูฝั่ง ขวาจะมีให้เลือกการใส่ HTML ให้เราเลือกตรงนั้นก่อนใช่มั้ยค่ะ
ขอโทษมากค่ะคือไม่รู้จริงๆ เพิ่งหัดทำอันแรก อยากได้หน้า comment ที่สวยอะค่ะ
ถ้าไม่รบกวนเกินไปขอแจ้งเมล Rinda_usa@hotmail.com ค่ะ ขอบคุณมากค่ะ

#35 By Rinda (110.164.242.169) on 2011-03-24 11:50

จะลองไปมั่วดูนะ

แต่ไอ้โค๊คเก่านี่มันเป้นยังไงเรอะ...

เห็นเขาบอกว่าใช้กับอันใหม่ไม่ได้...

#34 By TEXTER on 2010-09-15 16:31

เม้นค้าบบบ
แต่อ่านไปอ่านมาแล้วงงอ่ะคับ
ยัวไงก้แขอบตุณที่ชี้แนะคับsurprised smile

#33 By SosoSoleil on 2010-06-04 21:15

ขอบคุณที่นำมาแนะนำกันนะค่ะ

Hot! Hot! Hot!

#32 By i Am AcHLawN KniGhT on 2010-06-02 13:48

Hot! Hot!

#31 By Elmo on 2010-05-27 21:20

ขอบคุณค่า

เราเม้นแล้วนะ ไม่ได้อ่านเฉยๆsad smile

#30 By -DeminA- on 2010-03-26 21:09

ขอบคุณนะคะ
ช่วยได้เยอะสุดๆ เลยค่ะ

Hot! Hot! Hot! Hot! Hot!

#29 By aiwendil on 2010-03-23 20:20

sad smile sad smile xomment comment comment
ของคุณสำหรับความรู้ดีๆคร่าsurprised smile

#28 By อารายนะ on 2010-02-26 11:29

ขอบคุณค่า ><
จะลองทำดูบ้างนะคะ

#27 By ++MoMoKo-Ciel++ on 2010-01-04 12:53

ขอบคุณนะคะ

ช่วยได้เยอะเลย
^^

#26 By F0El-lN on 2009-10-30 19:09

ว้าวๆ เจ๋งมากเลยค่ะ >_<
จะลองทำดูนะคะ ขอบคุณมากๆ Hot!

#25 By -= O U R A N =- on 2009-10-28 14:33

สุโค่ยยยHot! Hot!

#24 By miracle-dream on 2009-07-29 20:07

ขอบคุณค่ะ ... ไว้ขอนำบางส่วนไปทดลองปรับใช้บ้าง ... :) big smile big smile

#23 By Initmate on 2009-07-27 12:54

ขอบคุณมากมายค่ะ^^~

#22 By LikeWeatheR on 2009-07-27 11:18

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

เป็นประโยชน์ มากๆ Hot!

ขอADD นะคะ

#21 By nana-sara on 2009-04-28 13:52

เข้าใจง่ายดีจ้า *-*
me/กลับไปดูโค้ด ccs ของตัวเอง @o@ ตาลาย
ติดตามอยู่น๊า สู้ๆ ^^

#20 By Cat dreams wanna fly. on 2009-04-24 12:14

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

#19 By Natchiiz ナチ on 2009-03-23 17:12

ขอบคุณสำหรับความรู้นะคะopen-mounthed smile

#18 By Love yaa on 2009-03-14 21:24

Hot! Hot! Hot! Hot!
ให้ไปเลย!

#17 By mils12 on 2009-02-24 20:48

อ๊ะ...เผลอกดเอนเทอไปซะแล้ววว ขอโทษค่าTT[]TT!!!
ขอบคุณสำหรับวิธีตกแต่งหรอบคอมเมนท์นะคะXD

#16 By [ KUROPA ] on 2009-01-16 15:36

ขอบคุนมกคร้าบบ

#14 By พริกเกลือ on 2009-01-16 14:56

แจ่มครับ ละเอียดและเข้าใจง่ายดี

#12 By Media Eater on 2009-01-09 13:17

เลิศมาก จะพยายามเอาไปแก้ไขดูนะคะ surprised smile ถ้าทำไม่ได้เพราะโง่จะเข้ามาถามค่ะ แฮะๆ

#11 By TakeruThaiFan on 2009-01-09 12:05

เยี่ยมเลยเขียนได้ดีมาก ....นี่ขนาดไม่สบายนะเนี่ย big smile

#10 By kakazz (125.24.84.150) on 2008-12-04 13:33

งงประทาน

จะลองอ่านใหม่เเล้วทำใหม่ดู sad smile

#9 By เฟงลุยไฟ! on 2008-12-03 22:41

เป็นมึน!!
ที่จน.คนดูเยอะอาจจะกลับมาเปิดดูหลายๆรอบก็ได้นะเคอะconfused smile
ป.ล.ประสบปัญหาเดียวกันเลยsad smile แต่จำนวนคนอ่าน+คอมเม้นท์น้อยกว่าเยอะ
แจ่มเลยจ้า
เข้ามาตอนแรกงงกับหน้าวินโดวส์ ดอส sad smile

#7 By Shuu Exteen on 2008-12-03 14:23

อ๊าาาาา theme สุดยอดเลยค่ะ ขยันทำมากๆอ่ะ
มี tutorial ด้วย ใจดีจัง ขอบคุณนะคะ

ป.ล. ราคาแก้วจานชามไรงี้ ก็ 15-20 บาทเองอ่าค่ะ งงเลย embarrassed

#6 By r a p p e l e r * on 2008-12-03 14:11

ดีเยี่ยมครับ เดี๋จะลองทำดู

Hot!

#5 By shobitt on 2008-12-03 12:15

กับ IE 6 ผมไม่แน่ใจครับ
แต่ผมทดสอบกับ IE 7 ไม่มีปัญหาครับ

#4 By r i j e -[a x k i z e l] on 2008-12-03 11:08

เยี่ยมมาก ขอบคุณครับ
ติดตามต่อไปเรื่อยๆ big smile

#3 By moothe on 2008-12-03 10:49

สวยจัง น่าสนใจนะครับ
แต่จะมีปัญหากับ IE6 อีกรึเปล่าอ่ะsad smile
บางทีทำ Theme แทบตาย ดูบน IE6 แทบจะรื้อ CSS ใหม่เลยangry smile

#2 By Ratcicle on 2008-12-03 10:39

ติดตามอยู่นะครับ Hot!

#1 By mahaoath on 2008-12-03 09:49