ก็รู้อยู่ใช่มั้ยว่ากำลังทำธีมใหม่อยู่

ทีนี้ เลยต้องมีการยุ่งกับการทำ CSS เพื่อให้ธีมออกมาแจ่ม

คนทั่วไปคงบ่นกันให้เซ่ดเลยละสิว่า แก้ยาก

แต่โครงสร้างมันนั้นง่ายมาก! ถ้าเข้าใจจริงๆ แล้ว จะแก้ไขอะไรก็สบายเลย

ก็เลยเอาโครงสร้างธีมของ Exteen เวอร์ชัน 4 มาให้ดู เวลาจะแก้ธีมจะได้รู้ตำแหน่ง

(เฮียแชมป์จะออกเวอร์ชัน 5 เมื่อไรเนี่ย ออกเมื่อไรเอนทรี่นี้หมดประโยชน์ทันใด เอวัง )

 

รูปทั้งหมด เวลาจะใช้ก็คลิกที่รูปนะครับ แล้วมันจะเปิดรูปใหญ่มาให้

ตัวสีเขียว คือผมเข้ามาแก้ไขทีหลังครับ

 

ใช้ธีม Apollo เป็นต้นแบบนะครับ เวลาแก้อะไรสำหรับมือใหม่จะได้ไม่งง

เริ่มจาก หน้าบล็อกแรกเลย ไม่มีส่วนของคอมเมนต์

ผมจะพูดแค่ส่วนใหญ่ๆ นะครับ

  • body คือส่วนใหญ่ที่สุด คลุมทั้งหมดเลย ใครรู้ HTML จะรู้ว่า body คลุมการแสดงผลทั้งหมดบนหน้าเว็บครับ
  • ส่วน #page คือตัวที่คลุมเนื้อหาบล็อกทั้งหมด ไม่คลุมพื้นหลังบล็อก (แต่คลุมพื้นหลังเอนทรี่) เวลาขยายขนาดของบล็อก ขยาย #page นี่ล่ะครับ
  • #header คลุมส่วนหัวทั้งหมด รวมทั้ง #coverimage ที่เป็นรูปหัวบล็อกด้วย เปลี่ยนรูปหัวบล็อก เปลี่ยนที่ #coverimage นี่ครับ
  • #neck คอครับคอ ส่วนคอของบล็อก บรรจุ #neck .module ที่บรรจุแถบเมนูไว้ บล็อกผมย้าย #neck ไว้บน #header ล่ะ โดยการทำ #neck ให้ absolute แล้วจับไปลอยบน #header
  • #belly ลำตัว คลุมหมดทั้ง #content และ #sidebar, #sidebar2
  • #content คลุมเนื้อหาในเอนทรี่ แถบ Navigation (Previous | Next) และคอมเมนต์ (ในหน้าคอมเมนต์)
  • .entry เนื้อหาเอนทรี่ครับ ไม่มีอะไรมาก
  • #sidebar,#sidebar2 ตัวไซด์บาร์ครับ ไว้จะพูดถึงอีกทีหลัง
  • #footer ส่วนปลายสุดของบล็อก (ความจริงบน #footer มี #leg อีกนะนี่ แต่ในรูปไม่มี #leg ก็เหมือนๆ กับ #neck นั่นแหละ เพียงแต่ #neck เป็นคอ #leg เป็นขา ) #leg จะปรากฎเมื่อเราจับเอา Widget บางตัวใส่ไว้ใกล้ๆ กับ #footer

 

จบส่วนหน้าหลัก ไปต่อกับส่วน #content ในหน้าคอมเมนต์

รูปนี้น่ะ คุณโอ๋ คอมเมนต์ที่ 13 ฝากแก้มาครับ แก้จาก .commentform เป็น #commentform

  • .entry บอกไปแล้ว
  • #commentform ส่วนโพสคอมเมนต์
  • .comment ส่วนแสดงคอมเมนต์ 1 คอมเมนต์ก็ 1 .comment เลย แยกส่วนกัน
รายละเอียดของ .comment มันเยอะครับ ใครอยากดูก็ดูได้ครับ

 

เอาละ สุดท้ายแล้ว Sidebar บ้าง

#sidebar เปลี่ยนเป็น #sidebar2 ได้นะครับ ถ้าเราไม่ได้ใช้ #sidebar

ส่วนของ #sidebar #...... ทั้งหลาย ผมจะไม่พูดนะครับ ดูในรูปน่าจะเคลียร์แล้ว

ผมพูดถึง #profile ละกันครับ

หลายๆ บล็อกเลย จะเห็นว่า ส่วนของ #profile มันไปทับส่วนอื่นอยู่

ตรงนี้แก้ได้ครับ โดยปรับความสูงของ #profile ให้เท่ากับความสูงของรูป Avatar แค่นี้ก็เสร็จแล้ว ง่ายมั้ยละครับ

 

โอ้ย กว่าจะอัพเสร็จ เหนื่อยเลย โฮกกกกก

เอาเป็นว่า จบแล้วครับ มีปัญหาอื่นๆ อีก ทิ้งไว้ที่คอมเมนต์ได้ครับ

 

ปล. แอบโปรโมต Twitter นะเนี่ย เพิ่งสังเกต

Comment

Comment:

Tweet

#109 By สติ๊กเกอร์ไลน์ (183.89.83.82|183.89.83.82) on 2014-11-28 11:52

Hot! Hot! Hot! Hot! Hot!

#108 By maymaycg on 2013-09-20 18:35

#107 By victoryblack on 2011-08-03 11:04

ขอบคุณค่ะ เยอะจริงๆ +0+ cry

#106 By mania2610 on 2011-03-23 10:49

ทำสวยดีจัง ไอเดียเจ๋ง confused smile

#105 By anuwats19 on 2011-03-22 19:08

THX

#104 By Capuchino on 2010-12-30 18:20

thankzzzzzzzzz

#103 By MOD_Tanoi on 2010-11-21 21:38

ขอบคู๊นนจร๊question

#102 By ''//HaLLoWaa// on 2010-10-15 20:19

ทำไมตัวหนังสือมันเล็กๆ ปรับ text size แล้ว ก็ยังอ่านไม่ออก
สบายดีป่าวจุ๊บบบๆๆๆๆๆๆๆๆ
ขอบคุณมากค่ะะ <333 Hot! Hot!

#99 By Printhorru . on 2010-08-06 01:54

ทำ ธีม ให้หน่อยได้มั้ยค่ะ

ติดต่อกลับ nana-da@windowslive.com

#98 By THe TiNg ToNg "GIRL" on 2010-07-24 17:02

ทำ ธีม ให้หน่อยได้มั้ยค่ะ

ติดต่อกลับ nana-da@windowslive.comsad smile

#97 By THe TiNg ToNg "GIRL" on 2010-07-24 17:01

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

#96 By vvvvv on 2010-05-20 15:44

ขอบคุณสำหรับ ความรู้ใหม่ๆครับ open-mounthed smile
คือว่าขยายขนาดบล็อกแล้ว พื้นตรงสีขาวมันคลุมไม่หมดน่ะค่ะ มันดูแปลกๆ ต้องทำยังไงคะ

(ไม่เข้าใจคลิกไปดูที่บล็อกเราได้ค่ะ)

รบกวนนิดนึงนะคะ

ขอบคุณมากค่ะ

#94 By JiNaPo on 2010-05-01 18:14

Hot! ก็ยัง งง ๆ อยู่
แต่ก็ต้องศึกษากันไป
ขอบคุณนะคะ

#93 By fankspark on 2010-04-30 18:45

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

#92 By peukping on 2010-03-21 18:36

ขอบคุณค่ะที่ช่วยสอนให้

#91 By นู๋จุ๋ม on 2010-01-09 18:35

ขอบคุณค่ะ

#90 By PenGuiN on 2009-12-31 21:07

ขอบคุณค่ะจะลองดู

#89 By ChoCoLaTe_FrapPe on 2009-12-31 10:09

งง? embarrassed

#88 By Komuri on 2009-10-22 21:43

ละเอียดพร้อมภาพประกอบ ขอบคุณนะคับ

Hot! Hot!

#87 By Pe@ & KeE on 2009-10-18 10:22

Hot! Hot!

ลืมกดดวาแด๊งๆๆๆๆ

#86 By GATETµCG on 2009-10-16 13:49

_/\_

ขอบคุณก๊าบบบบบ

#85 By GATETµCG on 2009-10-16 13:46

Hot!

#84 By RedPOISON on 2009-09-23 14:21

เจ๋ง!!Hot!

#83 By ~[TPoiNTsHooT]~ on 2009-09-14 07:33

Hot! อธิบายเข้าใจง่ายดีจังเลยค่ะ ตอนนี้ขอเก็บไปศึกษาคร่าวๆก่อนถ้ามีปัญหาจะมาถามนะคะ

ขอบคุณค่า~

#82 By piaaz on 2009-08-30 21:17

พอดีว่าเพิ่งทำ Blog ตัวใหม่ค่ะ
ทำอะไรไม่เป็น จะทำอะไรก็รู้สึกว่า งกๆเงิ่นๆไปหมด
แถมรูปที่อัพโหลดทีแรกนั่นก็ใหญ่เบ้อเร่อเลย
ตอนนี้รู้สึกอายกับรูปนั้นมากเลยค่ะ
งงทำไมระบบไม่ย่อรูปออโต้ให้ล่ะคะ

#81 By Hello,Babe on 2009-08-30 12:21

อ๋ออออออ ก็ยัง งง อยู่ค่ะ :]]

#80 By Hello,Babe on 2009-08-30 12:17

งง จังแล้วที่เราใช้อยู่นี่เวอร์ชั่นอะไรอ่ะ

#79 By katty on 2009-08-15 06:44

สวยงามมากเลยครับ ขอบคุณสำหรับความรู้ big smile

#78 By Zero Computer 2009 on 2009-08-12 21:37

ความสูงของรูปavatar มันเท่าไหร่ล่ะค่ะ
ตอบหน่อยจ้า
เป็นปัญหามานานแล้ว
ถ้าค่อยๆทำมันก็คงไม่ยากเกินไป แต่...

ผมจัยร้อน อ๊าคคค ปวดหัว

#76 By vzonay on 2009-07-20 22:51

theme เทพ!!!!

#75 By maxmaczaa on 2009-07-18 18:33

=[]= !!! สุดยอดดดด ธีมท่านสวยเด่น !

#74 By MR.NAY on 2009-07-06 13:41

Hot! Hot! Hot!
ผมมาอาศัยประโยชน์จากบทความนี้ด้วยคน ขอบคุณครับbig smile

#73 By Passionman on 2009-06-09 15:44

Hot! Hot! Hot!

ขอบคุณค่ะ

#72 By SHINA-SEEL on 2009-06-03 20:20

สวัสดีครับ ผม สงสัยในส่วนของ neck ทำยังไงถึงจะทำให้ภาพมันติดกันแบบของนายได้ครับ เราลองเอาภาพมาใส่แต่มันก็ล้นขอบ ช่วยชี้แนะทีconfused smile

#71 By sasiyos on 2009-04-24 16:37

Hot!
มีประโยชน์มากเลยค่ะ
ขอบคุณค่ะ

#70 By ~N!n@~ on 2009-04-13 22:28

Hot!
ขอบคุณหลายๆconfused smile

#69 By FullOpTion on 2009-04-13 20:54

เข้าใจดีขึ้นเยอะเลยค่ะ

Thanks

#68 By mAriSa_NaNa on 2009-03-29 20:28

ขอบคุณค่ะ

#67 By pla on 2009-03-19 16:13

คือว่าเปลี่ยนสีตรงคอมเม้นท์ให้เป็นสีขาวแล้วเปลี่ยนกลับไม่เป็นอ่ะค่ะ TT

จำไม่ได้ว่าต้องไปใส่ตรงไหน รบกวนด้วยค่ะ

#66 By K.Meow47 on 2009-03-11 14:10

สุดยอด ขอบคุณมากจริง ๆ

THEME BY EXTEEN

#65 By ท้องฟ้า on 2009-03-11 07:32

โอว๊ขอบคุณมากครับแหล่มเลย confused smile

#64 By XEGXEF on 2009-02-22 12:18

http://xvista.exteen.com/20080914/theme-exteenTheme อย่างละเอียด !! ตรงไหนฟะ

น้องเอ๊ก มาก็ดี แล้ว เมื่อกี้ นู๋กำลังดูลิงค์น้องx ข้างบน นั้น แต่ ทำแล้วไม่เข้าใจ และ นู๋ต้องทำยังไงต่อไป ...................... ช่วยเติมลงในช่องว่างด้วย นะ
55+

#63 By ไม่มี © on 2009-02-18 23:38

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

ชอบมาก

Hot! Hot! Hot!

#61 By mAriSa_NaNa on 2009-01-12 19:45

Hot! Hot! Hot! Hot! confused smile confused smile confused smile confused smile

#60 By myUbuntu on 2009-01-06 12:44

Recommend