วิธีทำ เทมเพลท 2 คอลัมน์
ให้มี 3 คอลัมน์ Sidebar ด้านขวา 2 คอลัมน์
วันนี้ผมจะมาพูดถึง วิธี การปรับแต่ง Template จาก 2 คอลัมน์ ให้มี 3 คอลัมน์ นะครับ โดยจะมี 1 คอลัมน์ คือในส่วนของ Content และ 2 คอลัมน์เล็ก ในแถบของ Sidebar โดยจะใช้ธีม Minima เป็นแม่แบบหลัก ตามที่ผมได้เคยกล่าวไว้นะครับ ด้านล่างนี้จะเป็น รูปแบบ ตัวอย่าง ที่จะทำออกมานะครับ (หรือเหมือน หน้าบล็อกของผมในตอนนี้แหละครับ)

เริ่มแรก ตามเคยนะครับ Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ ตามภาพด้านล่างเลยครับ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)
1.เริ่มจาก แก้ไข CSS ของ Template นะครับ เป็นการปรับขนาดของธีมครับ ให้ลบ 3 บรรทัด ตามภาพด้านล่าง ได้เลยครับ
ลบส่วนที่ 1

ลบส่วนที่ 2

ลบส่วนที่ 3

2.ปรับขนาดของส่วนต่างๆ ใน CSS ตามนี้นะครับ
ในส่วนของ #outer-wrapper ให้ปรับขนาด จาก 660px เป็น 960px
และ ในส่วนของ #main-wrapper ให้ปรับขนาดจาก 410px เป็น 530px และจัดต่ำแหน่ง ไปด้านซ้าย ตามภาพด้านล่างเลยครับ

ส่วนนี้ เพิ่มโค็ดจัด ซ้าย ตามภาพนะครับ

3.ถัดมา ให้ค้นหา โค็ดนี้ครับ
4.และทำการ เพิ่ม โค็ด CSS สำหรับ สองคอลัมน์ ทางด้านขวา โดยการเพิ่มโค็ด ต่อไปนี้ครับ

เริ่มแรก ตามเคยนะครับ Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ ตามภาพด้านล่างเลยครับ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)
1.เริ่มจาก แก้ไข CSS ของ Template นะครับ เป็นการปรับขนาดของธีมครับ ให้ลบ 3 บรรทัด ตามภาพด้านล่าง ได้เลยครับ
ลบส่วนที่ 1

ลบส่วนที่ 2

ลบส่วนที่ 3

2.ปรับขนาดของส่วนต่างๆ ใน CSS ตามนี้นะครับ
ในส่วนของ #outer-wrapper ให้ปรับขนาด จาก 660px เป็น 960px
และ ในส่วนของ #main-wrapper ให้ปรับขนาดจาก 410px เป็น 530px และจัดต่ำแหน่ง ไปด้านซ้าย ตามภาพด้านล่างเลยครับ

ส่วนนี้ เพิ่มโค็ดจัด ซ้าย ตามภาพนะครับ

3.ถัดมา ให้ค้นหา โค็ดนี้ครับ
#sidebar-wrapper และทำการแก้เป็น
#column_wrapper และแก้ขนาดเป็น 410px และจัดชิดขวา ดูตัวอย่างได้ตามภาพด้านล่างเลยครับ

4.และทำการ เพิ่ม โค็ด CSS สำหรับ สองคอลัมน์ ทางด้านขวา โดยการเพิ่มโค็ด ต่อไปนี้ครับ
#sidebar-top{
clear:both;
}
#sidebar-right{
width:200px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#sidebar-left{
width:200px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
จริงๆ จะเอาไปไว้ตรงส่วนไหนของ CSS ก็ได้ครับ แต่ถ้าไม่รู้จะไปวางตรงไหนดี ก็วางตามภาพเลยครับ


<b:section class='sidebar' id='sidebar-top'/>
<b:section class='sidebar' id='sidebar-left'/>
โดยการเพิ่มเข้าไปที่ใต้ tag <div id='column_wrapper'> นะครับ ดูตามภาพก็ได้ครับ

เสร็จแล้ว มาทำการเพิ่ม CSS อีกทีนึงครับ โดยการ เพิ่ม โค็ด ด้านล่างไว้ก่อน Tag </head> นะครับ
/* wire frame layout tweaks */
body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:310px;}
ไม่เข้าใจ ก็ดูภาพด้านล่างเอาครับ

เรียบร้อยแล้วครับ ทำการเซ็ฟ แล้วไปดูในหน้า องค์ประกอบของหน้า ถ้าได้หน้าตาแบบ ด้านล่างก็ โอเค ครับ
