ใครกำลังประสบปัญหาเนื้อที่การเขียนเอ็นทรีในบล็อกน้อยไปหรือเปล่า

วันนี้จะมานำเสนอวิธีขยายความกว้างพื้นที่แสดงข้อความในเอ็นทรีกัน
เป้นวิธีปรับแต่งความกว้าง สำหรับธีมเวอร์ชั่นใหม่ของเอ็กทีนโดยเฉพาะเลย

ในตัวอย่างจะขยายความกว้างขึ้นอีก 100px (pixels) เพราะง่ายต่อความเข้าใจครับ

ให้ไปที่ Tab ชื่อ Theme
> คลิกที่ปุ่ม Edit ของธีมที่ต้องการ
> หน้าจอ CSS Editor จะโผล่ขึ้นมา
>
ให้แก้ไขข้อมูลของธีมที่ถูกเลือกในจุดต่าง ๆ ตามนี้

#page
#header, #neck, #belly, #leg, #footer
ให้แก้ไขค่า width จาก 780px เป็น 880px

#coverimage
#neck .module
#leg .module
ให้แก้ไขค่า width จาก 730px เป็น 830px

#content
ให้แก้ไขค่า width จาก 490px เป็น 590px


เสร็จแล้วในส่วนของการกำหนดค่าตัวเลข แต่ยังไม่เสร็จทั้งหมดครับ
เพราะถ้าสังเกตในธีม จะเห็นว่ามีไฟล์รูปในส่วนที่เป็นขอบของบล็อก
ซึ่งจะเกิดจากไฟล์รูป 3 ไฟล์ประกอบกัน คือ header footer และ belly
ให้รูปมีขนาดความกว้างสูงสุดตามที่เรากำหนดไว้ ซึ่งในที่นี้ก็คือขนาด 880px

#header
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(
เลือกไฟล์ header ที่แก้ไขความกว้างแล้ว) top left no-repeat;

#neck
#leg
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว

url(เลือกตำแหน่งไฟล์ belly ที่แก้ไขความกว้างแล้ว) top left;

#belly
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(
เลือกตำแหน่งไฟล์ belly ที่แก้ไขความกว้างแล้ว) repeat-y;

#footer
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(เลือกตำแหน่งไฟล์ footer ที่แก้ไขความกว้างแล้ว) bottom left no-repeat;

ซึ่งจะต้องนำรูปที่แก้ไขแล้วมาอัพโหลดเก็บไว้ในพื้นที่ในบล็อก
แล้วจึงนำเอา url ของแต่ละภาพไปใส่ในตำแหน่งที่กำหนดไว้

และข่าวดีก็คือ ผมทำรูปพวกนั้นมาให้โหลดกันแล้ว ก๊อปเอาไปใช้กันได้เลย

  • header.png ขนาดความกว้าง 880 pixels [ PNG | GIF ]
  • belly.png ขนาดความกว้าง 880 pixels [ PNG | GIF ]
  • footer.png ขนาดความกว้าง 880 pixels [ PNG | GIF ]

หมายเหตุ: ไฟล์ PNG จะมีการสร้างเงาใต้กรอบรูป ส่วนไฟล์ GIF จะไม่มีเงาครับ

คำเตือน: การใช้ไฟล์ PNG ในบล็อก อาจส่งผลข้างเคียงอย่างรุนแรงกับผู้ที่ใช้ IE ได้ อ่านที่นี่ »

หรือถ้าคุณคิดว่าขนาด 880 นั่นยังกว้างไม่พอสำหรับบล็อกคุณ เอาไปเลย 980 pixels

  • header.png ขนาดความกว้าง 980 pixels [ PNG | GIF ]
  • belly.png ขนาดความกว้าง 980 pixels [ PNG | GIF ]
  • footer.png ขนาดความกว้าง 980 pixels [ PNG | GIF ]

ถ้าเป็นเตียงก็คงเป็นขนาดคิงไซส์กันเลยทีเดียว นอนสบายไม่ตกเตียงขาหัก
ซึ่งน่าจะพอเพียงสำหรับการทำ sidebar แบบสองฝั่งคลองได้ครับ

เสร็จแล้วล่ะ แค่นี้บล็อกของคุณก็จะกว้างขึ้นทันตาเห็น สามารถอัพเอ็นทรีกันได้กว้างจุใจ

ขอให้สนุกกับการแต่งบล็อกครับ

Comment

Comment:

Tweet

ขอบคุณสำหรับคำเเนะนำค่ะ(โค้ง)
ขอบคุณมากค่ะHot! Hot! Hot!

#301 By ♪~Blazechan~♪ on 2010-10-30 12:46

Dank u wel..

#300 By อ่อนซ้อม on 2010-10-29 18:53

ขอบคุณมากฮะ ^^

#299 By ☆アカツキ on 2010-10-13 14:46

ขอบคุณมากๆค่าHot! open-mounthed smile
ขอบคุณมากครับ

#297 By 5150110020 on 2010-09-26 02:58

บล็อกมีปัญญาอ่ะค่ะ มันแก้โค้ดไม่ได้ ลบธีมแล้วก็ใส่ไม่ได้อ่ะคะ
ทำไงดี

#296 By ame san on 2010-09-24 19:54

นึกว่าจะไม่ได้ืำทำซะแล้ว เพราะทำไม่เป็นเลย - -
ขอบคุณมากๆเลยนะคะ
^^

#295 By YMS on 2010-09-19 12:24

กำลังงงๆ อยู่ ฝากตัวด้วยครับbig smile

#294 By Game Sanook on 2010-09-18 15:52

ขอบคุณมากค่ะ เพิ่งลองทำบล็อก ไม่รู้เรื่องอะใรเลย
ลองผิดลองถูกไปเรื่อย เดี๋ยวลองเอาไปทำดูค่ะbig smile

#293 By on 2010-08-30 09:38

ของผมไม่มี #page
#header, #neck, #belly, #leg, #footer

#coverimage
#neck .module
#leg .module

#content ปรับแล้วดันออกขวาบ้าง ทำไงดีครับ

#292 By VectorRaid on 2010-08-09 23:58

ขอบคุณมากค่ะ กำลังให้ทำอยู่ แต่ไม่ค่อยเก่งเท่าไรค่ะ

#291 By 2pMforeVer on 2010-07-10 21:20

#289

อ่านต่อที่นี่เลย:
http://oatato.exteen.com/20071105/sidebar

#290 By oatato on 2010-07-10 01:31

แล้วทำไมลองทำแล้วใส่ในหน้า widgetแล้วมันขึ้นฝั่งเดียวอะ
ถ้าทำ2ฝั่งต้องใส่โคดไรเพิ่มมั่งอะ

#289 By [{G&H Master}] on 2010-07-09 18:24

พึ่งสมัครใหม่ ขอบคุณสำหรับคำแนะนำครับopen-mounthed smile

#288 By kul-chan on 2010-07-03 08:15

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

เป็นประโยชน์กับบล็อกหนูมากๆเลย

ทำได้แล้ว ><''

Hot! Hot! Hot!

#287 By on 2010-06-12 16:58

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

ความรู้ภาษาซีมีเท่าหางอึ่ง... เลยแก้เองไม่ได้ TTwTT

#286 By Lofe on 2010-05-22 15:12

Hot! Hot! Hot!

#285 By llo-oll on 2010-05-18 18:32

ขอบคุณค่ะ

#284 By llo-oll on 2010-05-18 18:29

ห๊ะ....ถูกใจ...แต่เจ้ไม่ทำอ่ะ...
เคยลงไปทีกดcssลองsave....แล้วมันไม่เปลี่ยน
แล้วตั้งแต่นั้นมันก็แก้ไม่ได้เลย...
ต้องเปลี่ยนธีมใหม่ลูกเดียว
...อ้าว....
แล้วตรูมาอ่านทำไมล่ะเนี่ย...
เอ่อ...ไม่ต้องไปสนใจ...เจ้บ้า.

#283 By เจ้นุช on 2010-05-12 22:57