วิธีแบ่งพื้นที่ของ widget บน Sidebar ของ Blogger ออกจากกัน

ในบทความ วิธีแยกแต่ละ Post บน Blogger ออกจากกัน เราได้เรียนรู้วิธีการแบ่งพื้นที่ของแต่ละ Post ใน Blogger ออกจากกันเพื่อความสวยงามและดูเป็นสัดส่วนชัดเจนมากขึ้น บทความนี้ผมก็จะใช้หลักการเดียวกัน และขอใช้ตัวอย่างเดิมเพื่อความต่อเนื่องกับบทความที่แล้ว

สอนทำบล็อก และสอนเทคนิคการทำ blogger

ก่อนอื่นต้องบอกก่อนนะครับว่าบทความนี้ผมเขียนให้เห็นการปฏิบัติจริง ๆ จึงเขียนลักษณะแบบเล่าเรื่อง และวิธีการนี้ไม่ใช่สูตรสำเร็จ แต่คุณจะได้เห็นวิธีการที่นำไปประยุกต์ใช้ได้กับ Template อื่น ๆ ที่ไม่ใช่ Template ในตัวอย่างนี้


วิธีแบ่ง widget ออกจากกัน

เริ่มต้น Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

หากคุณไม่ชำนาญในการแก้ไข HTML โปรดสำรองแม่แบบเอาไว้ก่อน >> วิธี Backup template

ขั้นที่ 1 ค้นหาโค้ด #sidebar-wrapper ให้เจอก่อน

สอนทำบล็อก


ซึ่ง Template ในตัวอย่างนี้ (ชื่อว่า Minima ดูรูปด้านบน) ผมค้นหาแล้วพบโค้ดที่กำหนด Style ดังนี้

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


สอนแต่งบล็อก

โค้ด #sidebar-wrapper จะเป็นส่วนที่กำหนดพื้นที่โดยรวมของ Sidebar ทั้งหมด ถ้าเรากำหนดพื้นหลังและเส้นขอบเข้าไปผลลัพธ์ที่ได้จะเกิดขึ้นดังนี้

เพิ่มโค้ดสีแดงเข้าไปแล้วลองแสดงตัวอย่างดู (ยังไม่ต้องบันทึกแม่แบบ)

#sidebar-wrapper {
background:#C3EDEA; /*พื้นหลังสีฟ้า*/
border: 1px solid #565656; /* เส้นขอบสีเทาเข้ม ทึบ */
padding:5px 7px 5px 7px; /* ค่าระยะห่างจากเส้นขอบ นับตามเข็มนาฬิกา บน ขวา ล่าง ซ้าย*/

width: 220px;
float: $endSide;
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 */
}


ผลลัพธ์ที่เกิดขึ้น

Blogger Template

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

หมายเหตุ ค่า padding:5px 7px 5px 7px; อธิบายด้วยรูปดังนี้

สอนสร้าง Blogger

ขั้นที่ 2 ค้นหาโค้ด .sidebar และทำการกำหนดพื้นหลังและเส้นขอบ เพื่อให้แต่ละ Widget บน Sidebar แยกออกจากกัน

ในที่นี้ผมพบโค้ด

.sidebar { 
color: $sidebartextcolor;
line-height: 1.5em;
}


เช่นเดิมผมก็ทำการเพิ่มโค้ดสีแดง เพื่อกำหนดพื้นหลังและเส้นขอบเข้าไปจะได้โค้ด

.sidebar {
background:#C3EDEA; /*พื้นหลังสีฟ้า*/
border: 1px solid #565656; /* เส้นขอบสีเทาเข้ม ทึบ */
padding:5px 7px 5px 7px; /* ค่าระยะห่างจากเส้นขอบ นับตามเข็มนาฬิกา บน ขวา ล่าง ซ้าย*/

color: $sidebartextcolor;
line-height: 1.5em;
}


จากนั้นให้กดแสดงตัวอย่างโดยยังไม่ต้องบันทึกนะครับ

สอนทำ blogspot

ปรากฎว่าผลที่ได้ก็ยังไม่ใช่ผลที่เราต้องการอยู่ดี ดังนั้นให้ลบโค้ดสีแดงที่เพิ่มเข้าไปในขั้นที่ 2 นี้ทิ้งไป

ขั้นที่ 3 ในขั้นนี้ผมลองค้นหาโค้ดที่มีความสัมพันธ์กับ .sidebar ต่อไปอีก ซึ่งก็ยังพบว่ามีโค้ด

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}



3.1 เนื่องจากการกำหนดลักษณะนี้เป็นการกำหนดให้ .sidebar .widget และ .main .widget ใช้ Style ร่วมกัน ผมจึงแยกสองส่วนนี้ออกจากกันก่อนเพราะถ้าเรากำหนดสไตล์ให้กับ .sidebar .widget จะได้ไม่ส่งผลถึง .main .widget

เมื่อแยกโค้ดออกจากกันแล้วได้เป็น

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


โดยความหมายของการกำหนดค่านั้นก็ยังคงเดิมจึงยังไม่ต้องแสดงตัวอย่างเพื่อดูผลลัพธ์ในขั้นนี้

3.2 ต่อไปผมจะเพิ่มการกำหนดพื้นหลังและเส้นขอบให้กับ .sidebar .widget  ซึ่งได้โค้ดเป็น

.sidebar .widget {
background:#C3EDEA; /*พื้นหลังสีฟ้า*/
border: 1px solid #565656; /* เส้นขอบสีเทาเข้ม ทึบ */
padding:5px 7px 5px 7px; /* ค่าระยะห่างจากเส้นขอบ นับตามเข็มนาฬิกา บน ขวา ล่าง ซ้าย*/

margin:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


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

จากนั้นผมก็แสดงตัวอย่างเพื่อดูผลลัพธ์

โค้ดต่าง ๆ ของ Blogger

จะเห็นว่าผลลัพธ์นั้นเป็นอย่างที่เราต้องการแล้ว หากคุณไม่ต้องการแก้ไขเพิ่มเติมก็สามารถบันทึกแม่แบบได้เลยครับ


บทสรุป

ใน Template ที่ชื่อ Minima กำหนดพื้นที่ของ Widget ด้วยโค้ด .sidebar .widget ซึ่งถ้าเพิ่มพื้นหลัง และเส้นขอบเข้าไปก็จะสามารถแยกพื้นที่ของแต่ละ Widget บน Sidebar ออกจากกันได้

ตอนนี้มีความคิดเห็น : 3 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. แล้วผมจะแยก widget บล๊อกผมได้เปล่าครับ

    http://zeed-maker.blogspot.com/

  1. 0ขอบคุณครับ จะลองดู
    pooyh2p.blogspot.com

  1. ผมต้องการปรับหน้าแรก Home ปรับระยะห่างของแต่ละบทความ จะปรับตรงไหนครับ ?
    คือผมโหลด Theme มาแล้วหน้า Home บทความแต่ละบทความมันห่างกันมากเกินไป Theme ตัวนี้นะครับ

    http://btemplates.com/2013/blogger-template-orangeline/demo/ แก้ตรงไหนครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel