Create 3-column blogger template

อิฉันอยากเพิ่ม column ด้านซ้าย ของ Minima Template นjะค่ะ จะได้มีที่วาง Gadget เพิ่มขึ้น..
ก็ทำตามขั้นตอนดังนี้ค่ะ


1. ไปที่ Template>Edit HTML แล้วก็ติ๊กที่ช่องว่างหน้า Expand widget templates
จากนั้นก็หาและแก้ HTML code

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

หลังจากนั้นให้ทำการ Copy code ข้างบน แล้วนำมาวางต่อกัน จากน้ันให้เปลี่ยน code ตามที่ highlight ตัวหนังสือสีแดง ดังนี้

#left-sidebar-wrapper
float: left

จากตรงนี้เราจะได้ sidebar ด้านซ้ายเพิ่มขึ้นมา
2. ต่อไปให้ค้นหา section นี้

ให้เพิ่ม section ข้างล่าง ก่อน section ข้างบน

จากนั้นให้เพิ่ม margin-left: 20px; เพื่อเพิ่มระยะห่างระหว่าง sidebar ด้านซ้ายกับ พื้นที่ post ดังนี้

#main-wrapper {
width: 410px;
float: left;
margin-left: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3. เมื่อตะกี้เราเพิ่งจะเพิ่ม column ด้านซ้าย ขนาด 220px และระยะห่างระหว่าง sidebar ด้านซ้ายกับพื่นที่ post 20px ดังนั้นเราควรเพิ่มขนาดให้กับ outer-wrapper และ header-wrapper ด้วย เพื่อความสมดุล ดังนี้

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

.......................................................................

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

4. ทำการ save แล้วดูผลงานได้เลยค่ะ