โครงสร้างของบล็อกจะประกอบไปด้วยส่วนหัว(Head Section), ส่วนด้านข้าง(Sidebar Section), ส่วนของบทความ(Post Section) และส่วนล่าง(Footer Section) ส่วนต่าง ๆ เหล่านี้คือมาตราฐานของบล็อกที่ถูกสร้างไว้ดังรูป
ส่วนต่าง ๆ ถูกเขียนด้วย HTML ดังนี้
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<div id='content-wrapper'>
<div id='main-wrapper'>
<div id='sidebar-wrapper'>
<div id='footer-wrapper'>
</body>
การสร้าง Sidebar หรือ Page Element มีขั้นตอนดังนี้
ขั้นตอนที่ 1 หาตำแหน่งที่เราต้องการจะเพิ่ม Sidebar หรือ Page Element ปกติแล้วเราจะเพิ่มไว้ส่วนบน <div id='content-wrapper'> โดยการวางโค๊ดข้างล่างนี้ไว้ข้างบนส่วนนั้น ๆ
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>
left-sidebar-wrapper คือชื่อตัวแปรตัวหนึ่งของส่วนที่เราต้องการเพิ่ม จะใช้เป็นชื่ออะไรก็ที่มีความหมายที่เราต้องการ เช่น ถ้าเราต้องการเพิ่ม Sidebar ไว้ที่ตำแหน่งบนสุดอาจจะเขียนเป็น top-sidebar-wrapper ก็ได้ ให้แก้ทั้ง 2 ตำแหน่ง
ขั้นตอนที่ 2 ให้ลองไปที่ รูปแบบ|องค์ประกอบของหน้า(Layout|Page Element) เพื่อดูว่าส่วนที่เราทำการเพิ่มขึ้นมาปรากฏอยู่ที่ตำแหน่งใด
ขั้นตอนที่ 3 ค้นหาโค๊ดในกลุ่มที่มีลักษณะประมาณนี้
#outer-wrapper {
width: 660px;
padding: 10px;
....... }
#main-wrapper {
width: 410px;
float: left;
....... }
#sidebar-wrapper {
width: 220px;
float: right;
........ }
ขั้นตอนที่ 4 เพิ่มโค๊ดต่อไปนี้ให้อยู่ในพื้นที่ของโค๊ดกลุ่มที่แสดงด้านบน จะให้อยู่ตำแหน่งไหนก็ได้ไม่มีปัญหา
#left-sidebar-wrapper {
border: 1px solid $SBbdColor; //ความหนาของเส้นกรอบที่ต้องการ ถ้าไม่ต้องการให้ใส่ 0px
background-color: $SBbgColor; //สีพื้น
margin-right:10px; //ระยะห่างของเนื้อหาภายในจากขวาของกรอบ
position: absolute; //ให้วางในตำแหน่งที่กำหนดจริง ๆ
left:30px; //ให้วางที่ตำแหน่งซ้ายมือของบล็อกห่างจากขอบจอ 30px
top:5px; //ให้ตำแหน่งของส่วนที่เพิ่มห่างจากส่วนบนสุด 5 px
width:315px; //ความกว้างของส่วนที่เพิ่ม
background-repeat: repeat-x;
background-position: center top;
}
ขั้นตอนที่ 5 ทำการบันทึกแม่แบบ แล้วไปที่องค์ประกอบของหน้าดูตำแหน่งที่ต้องการเพิ่มว่าถูกต้องหรือเปล่า คงต้องเสียเวลาปรับแต่งตำแหน่งให้ดูสวยงามตามขั้นตอนที่ 4 ซักเล็กน้อย
ถ้ามีปัญหาหรือข้อสงสัยประการใดก็ให้ comment มาน๊ะครับ จะได้ตอบให้ชัดเจน
บทความ
1 ความคิดเห็น:
ขอบคุณมากเลยค่ะ เข้ามาอ่านและทำตามไปเรื่อยๆ ปรับแต่งบลอคได้ตามที่ต้องการเยอะเลย
แสดงความคิดเห็น