การเพิ่ม 3 column ในตำแหน่งล่างสุดให้กับบล็อกของเรา

ถ้าดูจากรูปประกอบข้างล่างนี้ ผมได้ทำการเพิ่ม 3 column ในตำแหน่ง footer และมีเส้นแบ่งคั่นอยู่ ตามด้วยอีก 1 column ถัดลงมา โดยปกติแล้ว free template ที่เราหามาอาจจะไม่มีในสิ่งที่เราต้องการ การต้องการให้มี column เพิ่มไม่ว่าจะเป็นในส่วนบนหรือล่างบล็อกเราก็ต้องทำเพิ่มขึ้นมาเอง


ตอนนี้เรามาดูกันว่าขั้นตอนในการเพิ่ม column เป็นอย่างไรบ้าง

ขั้นตอนที่ 1 ทำการสำรองแม่แบบ(Backup Template) เอาไว้ก่อนน๊ะครับ

ขั้นตอนที่ 2 ไปที่ รูปแบบ|องค์ประกอบของหน้า(Layout|Page Elements) ให้ทำการย้าย Gadget ที่อยู่ในตำแหน่ง footer ไปไว้ที่อื่นก่อน เดี๋ยวจะอันตธานหายไประหว่างการแก้ไข HTML

ขั้นตอนที่ 3 ไปที่ รูปแบบ|แก้ไข HTML(Layout|Edit HTML) ไม่ต้องติ๊กขยายแม่แบบน๊ะครับจะได้ดูไม่ยุ่งยาก แล้วค้นหาโค๊ดข้างล่างนี้

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ขั้นตอนที่ 4 ให้แทนที่โค๊ดสีแดงตามขั้นตอนที่ 3 ด้วยโค๊ดข้างล่างนี้

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

*ถ้าต้องการเพิ่ม 3 column ไว้ส่วนบนของบล็อก ก็ให้วางโค๊ดตามขั้นตอนที่ 4 ไว้ด้านบนโค๊ด <div id='content-wrapper'> แต่ควรจะเปลี่ยนคำว่า footer เป็น topper หรือ header ก็ได้
*ถ้าต้องการเปลี่ยนสีเส้นแบ่ง ก็ให้แก้โค๊ดสี(ตัวหนังสือสีแดง)ที่ตำแหน่งโค๊ด <hr align='center' color='#5d5d54' width='90%'/></p>
*ถัดจากเส้นแบ่งจะเป็น Gadget ที่อยู่ถัดลงมา ถ้าไม่ต้องการก็ให้ลบออกจนถึงโค๊ด <div style='clear:both;'/>

ขั้นตอนที่ 5 ค้นหาโค๊ด </b:skin> แล้ววางโค๊ดข้างล่างนี้ไว้ด้านบน

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

*ถ้าต้องการให้มี 3 column ในตำแหน่งบน ก็ให้เปลี่ยนจาก footer-column เป็น topper-column หรือ header-column ตรงนี้จริง ๆ ก็คือตัวแปรตัวหนึ่งเท่านั้นเอง เราจะตั้งเป็นชื่ออะไรก็แล้วแต่เรา แต่ควรจะตั้งให้มีความหมายที่เราเข้าใจได้เผื่อวันข้างหน้าเราจะทำการแก้ไขจะได้ง่ายต่อการค้นหา

ขั้นตอนที่ 6 ทำการบันทึกแม่แบบ
*การบันทึกแม่แบบอาจจะมีการแสดงข้อผิดพลาดเนื่องจากการใช้ตัวแปลที่ซ้ำกัน เช่น footer2 ให้เราเปลี่ยนจาก footer2 เป็น footer12 ก็ได้ ให้ตัวเลยหนีกันไปไกล ๆ หน่อยก็ดี หรืออาจจะเป็นตัวแปล "col1", "col_bottom" ที่ซ้ำกัน ก็ให้เปลี่ยนเป็น "col11", "col12" หรือ "col_topper", "col_header" ก็ได้ครับ

ถ้าอ่านแล้วงงหรือทำไม่ได้ก็ให้เม้นท์มาได้น๊ะครับ แล้วผมจะรีบตอบให้