หลายคนอาจจะเบื่อเลย์เอาท์เดิม ๆ ของเว็บไซด์ที่มีเนื้อหาอยู่ทางซ้าย และ Sidebar อยู่ทางขวาแล้วใช่มั้ยครับ?

(ถึง Sidebar จะอยู่ทางขวาแต่ปกติมันก็จะโหลด Sidebar มาก่อนเนื้อหาอยู่ดี อ่านวิธีแก้ไขที่นี่ครับ)

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

พอย้ายแล้วหน้าตาบลอคจะเป็นแบบนี้ครับ:

ย้าย sidebar exteen มาทางซ้าย

เห็นแล้วเริ่มอยากลองย้ายกันหรือยังครับ? สำหรับการย้ายไซด์บาร์มาด้านซ้าย ก็ง่าย ๆ แบบนี้เลยครับ:

 

ก่อนอื่นเราต้องย้ายส่วนเนื้อหาบลอคไปวางทางขวาก่อน (เพื่อให้ใช้ได้ในกรณีบลอคนั้นมีการเปลี่ยน Sidebar เป็น Sidebar2)

โดยไปที่ My Dashboard > Theme > CSS Editor และหาบรรทัดดังนี้

.entry{
   float:left;
   margin-bottom:15px;
}

แก้ left เป็น right ครับ

จากนั้นหาโค้ดต่อไปนี้

#sidebar, #sidebar2{
   background:#473e3c;
   display:inline;
   float:right;
   margin:5px 25px 0px 0px;
   width:225px;
}

 แก้ right เป็น left

และแก้ในส่วน margin ครับ ซึ่งค่าของ margin ที่เห็นเป็น 5px 25px 0px 0px นั้นมาจาก

  • พื้นที่ว่างด้านบน 5px
  • พื้นที่ว่างด้านซ้าย 25px
  • พื้นที่ว่างด้านล่าง 0px
  • พื้นที่ว่างด้านขวา 0px

(จริง ๆ ถ้าเขียนให้ถูกตามกฎ CSS แล้ว ถ้าค่าเป็น 0 เราไม่ต้องกำหนดหน่วยครับ เพราะฉะนั้นไม่จำเป็นต้องเขียน 0px เขียนแค่ 0 ก็ได้)

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

วิธีแก้ก็คือ... เอาค่าสำหรับพื้นที่ว่างด้านซ้าย กับพื้นที่ว่างด้านขวา มาสลับกันครับ ก็จะกลายเป็น 5px 0 0 25px

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

 

สนใจอยากรู้เรื่องอะไรก็รีเควสมาได้เลยนะครับ

edit @ 6 Apr 2010 03:21:22 by designil

Comment

Comment:

Tweet

ขอบคุณครับHot! Hot! Hot! Hot! Hot!

#20 By true tv psi on 2011-12-18 22:42

ดีค่ะ ขอบคุณค่ะ
ขอบคุณ ค่ะ
ใจจ้า

#17 By ★June•Ly★ on 2011-11-16 18:42

ขอบคุณมากเลยงับconfused smile Hot! Hot! Hot!

#16 By FK on 2011-10-22 18:21

หาวิธีทำเจอจนได้ ขอบคุณมากๆ ครับ

#15 By weber 121020 (210.1.31.28) on 2011-09-29 00:14

อยากรู้คับว่า

.entry{
float:left;
margin-bottom:15px;

แต่จะเปลี่ยนมันเปลี่ยนไม่ได้คับ งง มากพอกดจะลบ left ออกดันกลับไปหน้าถอยหลัง เหมือนมันล๊อค คับ ทำไงบอกด้วยนะคับ

#14 By DeviDrak on 2011-07-26 19:49

ทำตามแล้วเนื้อหาentryทับsidebar(ที่อยู่ด้านซ้ายแล้ว)ไปครึ่งนึงเลยครับ

#13 By Kenguigo on 2011-07-12 07:14

ขอบคุณมากค้าา

#12 By ✿ Jidako on 2011-05-04 11:37

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

#11 By -dR.noonteuk:-] on 2011-04-30 15:09

ขอบคุณมากๆเลยครับ....
Hot! Hot! Hot!

#10 By codename on 2011-04-29 20:33

ทำไมไม่ได้อ่ะคะ = =" แก้แล้วเหมือนเดิม ไม่ได้ผล..ทำไงดี

#9 By mayrisagirl on 2011-04-24 18:27

แจ่มคะ ขอบคุณนะค๊ะ :))

#8 By natcute on 2011-04-02 17:48

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

ช่วยได้เยอะเลย ^^
อันเก่าพอลงฟิคแล้วมันกลายเป็นว่าไปทับกับ
Sidebar ด้านขวา

#7 By Gloom_WiDow on 2011-03-13 18:04

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

#6 By ♪~Blazechan~♪ on 2011-03-05 22:25

thanks

#5 By ✿ MASTER.KNIGHT on 2010-11-05 08:33

ลองทำแล้วครับได้ผลดีมากครับ ขอบคุณครับHot!

#4 By timoney on 2010-11-02 22:57

เดี๋ญวจะลองไปทำดูแล้วจะมารายการค่ะ :D

#3 By .:: Milo Studio ::. on 2010-10-01 21:43

อยากเรียนรู้เพิ่มครับ

#2 By RFU on 2010-08-13 18:25

ผมเคยทำ แต่ไม่ค่อยดีเท่าไร

#1 By Dogเตอร์นน on 2010-05-17 22:03

Code Here.