# วิธีทำ Sidebar (ไซด์บาร์) เนื้อหา + แถบข้าง ในธีม Blogger ไซด์บาร์คือแถบข้างที่วางองค์ประกอบเสริมอย่างหมวดหมู่ ค้นหา และคลังบทความไว้ข้างเนื้อหาหลัก เป็นเลย์เอาต์คลาสสิกที่ช่วยการนำทางในบล็อกที่มีเนื้อหาเยอะ บทความนี้สอนวิธีเพิ่มในธีม Blogger ด้วย BlogKub ที่จัดวางข้างเนื้อหาให้อัตโนมัติ เลือกฝั่งและความกว้างได้ พร้อมวิดเจ็ตที่ใช้บ่อย *อัปเดต 16 กรกฎาคม 2026 · อ่านประมาณ 9 นาที · ระดับ: เริ่มต้น* > **สรุปสั้น:** เพิ่มบล็อก **Sidebar Layout** ใน BlogKub ไว้ใกล้กลุ่มบทความ เลือกฝั่ง **ซ้าย/ขวา** ตั้ง **ความกว้าง** และเปิดวิดเจ็ตที่ต้องการ (**ค้นหา, หมวดหมู่/ป้ายกำกับ, คลังบทความ, เกี่ยวกับผู้เขียน** ) ระบบจะ **จัดไซด์บาร์ให้อยู่ข้างเนื้อหาหลักอัตโนมัติ** ตอน Export และ **ยุบลงล่างบนมือถือ** เพื่อให้เนื้อหาได้พื้นที่เต็ม  *เลย์เอาต์ไซด์บาร์: เนื้อหาบทความคู่กับแถบข้างที่มีค้นหา หมวดหมู่ และเกี่ยวกับผู้เขียน ระบบจัดวางอัตโนมัติ* ## ไซด์บาร์คืออะไร และเหมาะกับใคร **ไซด์บาร์ (Sidebar) คือแถบแนวตั้งที่วางอยู่ข้างเนื้อหาหลัก ใช้แสดงองค์ประกอบเสริม เช่น ช่องค้นหา หมวดหมู่ คลังบทความ และข้อมูลผู้เขียน** เป็นเลย์เอาต์แบบสองคอลัมน์ที่คลาสสิกและคุ้นเคย โดยเนื้อหาหลักกินพื้นที่ส่วนใหญ่ ส่วนไซด์บาร์เป็นคอลัมน์แคบ ๆ ที่ช่วยการนำทางและให้ข้อมูลเพิ่มเติม ไซด์บาร์เหมาะกับบล็อกที่มีบทความจำนวนมากและหลายหมวด เพราะวิดเจ็ตอย่างหมวดหมู่และคลังบทความช่วยให้ผู้อ่านสำรวจเนื้อหาได้ง่าย ในทางกลับกัน บล็อกที่เน้นการอ่านยาวแบบโฟกัส หรือดีไซน์มินิมอล อาจเลือกเลย์เอาต์คอลัมน์เดียวเพื่อไม่ให้ไซด์บาร์ดึงความสนใจจากเนื้อหา การเลือกใช้ไซด์บาร์จึงขึ้นกับลักษณะและเป้าหมายของเว็บ ## จัดวางอัตโนมัติ: คุณไม่ต้องเรียงคอลัมน์เอง จุดที่ทำให้ไซด์บาร์ของ BlogKub ใช้ง่ายคือ **ระบบจัดวางให้อัตโนมัติ** คุณไม่ต้องยุ่งกับการสร้างโครงสร้างสองคอลัมน์เอง เพียงวางบล็อก Sidebar ไว้ใกล้กลุ่มบทความ (เช่น postgrid, postlist หรือ featured) ตอน Export XML ระบบจะจัดให้ไซด์บาร์ไปอยู่ข้างเนื้อหาหลักตามฝั่งและความกว้างที่คุณตั้งไว้ นี่ช่วยประหยัดความยุ่งยากอย่างมาก เพราะการทำเลย์เอาต์สองคอลัมน์ด้วยมือใน Blogger XML เป็นเรื่องซับซ้อนที่ต้องเข้าใจโครงสร้าง section และ CSS การที่ BlogKub จัดการให้หมายความว่าคุณได้เลย์เอาต์ไซด์บาร์ที่ถูกต้องและ responsive โดยเพียงเลือกตัวเลือกไม่กี่อย่าง ไม่ต้องแตะโค้ดเลย ## วิธีเพิ่มไซด์บาร์ทีละขั้น 1. **เพิ่มบล็อก Sidebar** เปิดคลังบล็อกด้านซ้าย แล้วลากบล็อก “Sidebar Layout” มาวางไว้ใกล้กลุ่มบทความ (postgrid/postlist/featured) เพื่อให้ระบบรู้ว่าจะวางไซด์บาร์ข้างเนื้อหาส่วนใด 2. **เลือกฝั่งและความกว้าง** เลือกให้ไซด์บาร์อยู่ฝั่งซ้ายหรือขวา และตั้งความกว้าง เช่น 280px ตามความเหมาะสมของเลย์เอาต์ 3. **เลือกวิดเจ็ตในไซด์บาร์** เปิดวิดเจ็ตที่ต้องการ ได้แก่ ช่องค้นหา ป้ายกำกับ/หมวดหมู่ คลังบทความ และเกี่ยวกับผู้เขียน เลือกเฉพาะที่มีประโยชน์กับเว็บของคุณ 4. **Export XML และตรวจผล** กด Export อัปโหลดเข้า Blogger แล้วตรวจว่าไซด์บาร์วางข้างเนื้อหาถูกต้องบนเดสก์ท็อป และยุบลงล่างเนื้อหาบนมือถือ ## วิดเจ็ตในไซด์บาร์และประโยชน์ของแต่ละอัน ไซด์บาร์มีค่าก็ต่อเมื่อวิดเจ็ตในนั้นมีประโยชน์ต่อผู้อ่าน BlogKub มีวิดเจ็ตหลักให้เลือกเปิด - **ช่องค้นหา:** ให้ผู้อ่านค้นหาบทความในเว็บได้จากไซด์บาร์ เหมาะกับเว็บที่มีเนื้อหาเยอะ ใช้แนวคิดเดียวกับ[ช่องค้นหา](https://www.blogkub.com/learn/search)ที่วางในตำแหน่งอื่น - **ป้ายกำกับ/หมวดหมู่:** แสดงหมวดหมู่ของบล็อกให้ผู้อ่านคลิกไปดูบทความในหมวดที่สนใจ ช่วยการนำทางตามหัวข้อ - **คลังบทความ (Archive):** จัดบทความตามช่วงเวลา ให้ผู้อ่านย้อนดูบทความเก่าตามเดือน/ปี เหมาะกับบล็อกที่เขียนสม่ำเสมอ - **เกี่ยวกับผู้เขียน:** แสดงโปรไฟล์ผู้เขียน สร้างความเชื่อมโยงและความน่าเชื่อถือ (E-E-A-T) ให้ผู้อ่านรู้ว่าใครเป็นคนเขียน เคล็ดลับคือเลือกเฉพาะวิดเจ็ตที่ผู้อ่านของคุณได้ประโยชน์จริง ไซด์บาร์ที่ยัดทุกอย่างจนยาวเหยียดจะดูรกและลดความสำคัญของแต่ละส่วน การมีวิดเจ็ตที่พอดีและจัดเรียงตามความสำคัญทำให้ไซด์บาร์ทำหน้าที่ได้ดีที่สุด ## ไซด์บาร์บนมือถือ: ยุบลงล่างอัตโนมัติ ความท้าทายของเลย์เอาต์สองคอลัมน์คือบนมือถือไม่มีพื้นที่พอวางสองคอลัมน์ข้างกัน BlogKub แก้ด้วยการ **ยุบไซด์บาร์ลงไปอยู่ด้านล่างเนื้อหาหลักโดยอัตโนมัติบนจอเล็ก** ทำให้เนื้อหาหลักได้พื้นที่เต็มความกว้างและอ่านง่าย ส่วนวิดเจ็ตในไซด์บาร์ก็ยังเข้าถึงได้เมื่อผู้อ่านเลื่อนลงมา การจัดการนี้สำคัญเพราะผู้อ่านส่วนใหญ่เข้าจากมือถือ ถ้าไซด์บาร์ไม่ยุบและบีบเนื้อหาให้แคบ การอ่านก็จะทรมาน การที่ระบบทำ responsive ให้อัตโนมัติหมายความว่าคุณได้ประโยชน์ของไซด์บาร์บนเดสก์ท็อป โดยไม่เสียประสบการณ์การอ่านบนมือถือ นี่คือการออกแบบที่คำนึงถึงทุกอุปกรณ์ตั้งแต่แรก ## เลือกฝั่งและความกว้างให้สมดุล การเลือกฝั่งของไซด์บาร์ส่งผลต่อความรู้สึกของหน้า ไซด์บาร์ **ฝั่งขวา** เป็นแบบคลาสสิกที่พบบ่อยที่สุด เพราะให้เนื้อหาหลักอยู่ฝั่งซ้ายซึ่งเป็นที่ที่สายตาเริ่มอ่าน ส่วนไซด์บาร์ **ฝั่งซ้าย** ให้ความรู้สึกเหมือนแผงนำทางที่อยู่ก่อนเนื้อหา เหมาะกับเว็บที่เน้นการนำทางเป็นหลัก ทั้งสองใช้ได้ เลือกตามดีไซน์และความสมดุลที่ต้องการ ส่วนความกว้าง ค่าราว 280px เป็นจุดที่กำลังดีสำหรับไซด์บาร์ทั่วไป กว้างพอให้วิดเจ็ตแสดงเนื้อหาได้ครบโดยไม่แคบจนอึดอัด และไม่กว้างจนแย่งพื้นที่เนื้อหาหลัก หากตั้งกว้างเกินไป เนื้อหาหลักจะถูกบีบและอ่านยากขึ้น การหาสมดุลระหว่างพื้นที่เนื้อหากับไซด์บาร์จึงเป็นกุญแจของเลย์เอาต์ที่ดี ## ไซด์บาร์ vs คอลัมน์เดียว: เทรนด์และการเลือก ในช่วงหลายปีที่ผ่านมา เว็บจำนวนมากหันไปใช้เลย์เอาต์คอลัมน์เดียวที่โฟกัสเนื้อหา โดยเฉพาะบล็อกสายอ่านยาวและเว็บที่เน้นมินิมอล เหตุผลคือคอลัมน์เดียวช่วยให้ผู้อ่านจดจ่อกับเนื้อหาโดยไม่มีสิ่งรบกวนด้านข้าง และดูทันสมัยสะอาดตา อย่างไรก็ตาม ไซด์บาร์ยังไม่ได้ล้าสมัย มันยังมีประโยชน์ชัดเจนกับเว็บที่การนำทางและการค้นพบเนื้อหาสำคัญ เช่น เว็บที่มีบทความหลายร้อยชิ้นหลายหมวด การเลือกจึงไม่ใช่เรื่องถูกหรือผิด แต่เป็นเรื่องของเป้าหมาย ถ้าเว็บของคุณต้องการให้ผู้อ่านสำรวจหลายบทความและนำทางตามหมวด ไซด์บาร์ช่วยได้มาก แต่ถ้าเป้าหมายคือให้ผู้อ่านจดจ่อกับบทความเดียวจนจบ คอลัมน์เดียวอาจเหมาะกว่า ข้อดีของ BlogKub คือคุณเลือกได้ทั้งสองแบบและสลับได้ตามต้องการ ทดลองดูว่าแบบไหนเข้ากับผู้อ่านและเนื้อหาของคุณมากที่สุด ## ปัญหาที่พบบ่อยและวิธีแก้ ### ไซด์บาร์ไม่อยู่ข้างเนื้อหา ตรวจว่าวางบล็อก Sidebar ไว้ใกล้กลุ่มบทความ (postgrid/postlist/featured) เพราะระบบใช้ตำแหน่งนี้จัดวางไซด์บาร์ข้างเนื้อหา หากวางห่างจากกลุ่มบทความ การจัดวางอาจไม่เป็นไปตามคาด ### เนื้อหาหลักแคบเกินไป อาจตั้งความกว้างไซด์บาร์มากเกินไป ลองลดความกว้าง (เช่นกลับมาที่ 280px) เพื่อคืนพื้นที่ให้เนื้อหาหลัก ### วิดเจ็ตในไซด์บาร์ไม่แสดง ตรวจว่าเปิดวิดเจ็ตที่ต้องการและ Export ใหม่แล้ว บางวิดเจ็ต เช่น คลังบทความ จะแสดงเมื่อมีบทความพอให้จัดกลุ่มตามเวลา ### ไซด์บาร์บนมือถือดูรก เพราะไซด์บาร์ยุบลงล่าง หากมีวิดเจ็ตเยอะจะทำให้ส่วนล่างยาว ลองลดจำนวนวิดเจ็ตให้เหลือเฉพาะที่จำเป็นเพื่อให้มือถือกระชับ ## แนวทางปฏิบัติที่ดี (Best Practices) - วางบล็อก Sidebar ใกล้กลุ่มบทความเสมอ เพื่อให้ระบบจัดวางข้างเนื้อหาถูกต้อง - เลือกเฉพาะวิดเจ็ตที่ผู้อ่านได้ประโยชน์จริง อย่ายัดทุกอย่างจนไซด์บาร์ยาวและรก - ตั้งความกว้างที่สมดุล (ราว 280px) เพื่อไม่บีบเนื้อหาหลัก - พิจารณาว่าเว็บของคุณเหมาะกับไซด์บาร์หรือคอลัมน์เดียว ตามลักษณะเนื้อหา - ใช้วิดเจ็ตค้นหาและหมวดหมู่ร่วมกับ[เบรดครัมบ์](https://www.blogkub.com/learn/breadcrumb)เพื่อระบบนำทางที่ครบถ้วน ## สรุป ไซด์บาร์เป็นเลย์เอาต์คลาสสิกที่ช่วยการนำทางในบล็อกที่มีเนื้อหาเยอะ ด้วยการวางองค์ประกอบเสริมอย่างค้นหา หมวดหมู่ คลังบทความ และข้อมูลผู้เขียนไว้ข้างเนื้อหาหลัก ด้วย BlogKub คุณเพียงวางบล็อก Sidebar ใกล้กลุ่มบทความ เลือกฝั่งซ้าย/ขวา ตั้งความกว้าง และเปิดวิดเจ็ตที่ต้องการ ระบบจะจัดไซด์บาร์ให้อยู่ข้างเนื้อหาอัตโนมัติตอน Export และยุบลงล่างบนมือถือเพื่อรักษาประสบการณ์การอ่าน โดยที่คุณไม่ต้องแตะโค้ดเลย เมื่อเลือกวิดเจ็ตที่มีประโยชน์จริงและตั้งความกว้างให้สมดุล ไซด์บาร์จะช่วยให้ผู้อ่านสำรวจเนื้อหาของคุณได้ง่ายขึ้น ซึ่งเหมาะอย่างยิ่งกับบล็อกที่สะสมบทความไว้จำนวนมาก ## คำถามที่พบบ่อย (FAQ) **Sidebar วางที่ไหน และวางเองไหม?** ไม่ต้องวางเอง วางบล็อก Sidebar ไว้ใกล้กลุ่มบทความ (postgrid/postlist/featured) ระบบจะจัดให้ไซด์บาร์อยู่ข้างเนื้อหาหลักโดยอัตโนมัติตอน Export XML คุณเพียงเลือกฝั่งซ้ายหรือขวาและความกว้าง **ใส่อะไรในไซด์บาร์ได้บ้าง?** มีวิดเจ็ตให้เลือกเปิด เช่น ช่องค้นหา ป้ายกำกับ/หมวดหมู่ คลังบทความ (archive) และเกี่ยวกับผู้เขียน (โปรไฟล์) เลือกเฉพาะที่ต้องการเพื่อให้ไซด์บาร์มีประโยชน์โดยไม่รก **ไซด์บาร์แสดงบนมือถืออย่างไร?** บนมือถือที่พื้นที่จำกัด ไซด์บาร์จะยุบลงไปอยู่ด้านล่างเนื้อหาหลักโดยอัตโนมัติ เพื่อให้เนื้อหาหลักได้พื้นที่เต็มความกว้างและอ่านง่าย ผู้อ่านยังเข้าถึงวิดเจ็ตในไซด์บาร์ได้เมื่อเลื่อนลง **เลือกฝั่งซ้ายหรือขวาดีกว่า?** ขึ้นกับแนวเว็บ ไซด์บาร์ขวาเป็นแบบคลาสสิกที่พบบ่อยและให้เนื้อหาอยู่ฝั่งซ้ายตามการอ่าน ส่วนไซด์บาร์ซ้ายให้ความรู้สึกเหมือนแผงนำทาง ทั้งสองใช้ได้ เลือกตามดีไซน์และความสมดุลของหน้า **ไซด์บาร์เหมาะกับบล็อกแบบไหน?** เหมาะกับบล็อกที่มีบทความจำนวนมากและหลายหมวด เพราะไซด์บาร์ช่วยการนำทางด้วยหมวดหมู่ คลังบทความ และค้นหา ส่วนบล็อกที่เน้นความเรียบง่ายหรืออ่านยาวอาจเลือกเลย์เอาต์คอลัมน์เดียวเพื่อโฟกัสเนื้อหา --- *บทความนี้เป็นส่วนหนึ่งของ [คู่มือฟีเจอร์ BlogKub](https://www.blogkub.com/learn/) · คู่มือทีละฟีเจอร์ พร้อมวิธีตั้งค่า ตัวเลือก และปัญหาที่พบบ่อย* > เขียนโดย > > ภัทร์พิศาล ดาทอง · เบน > > ผู้ก่อตั้ง BlogKub และบล็อกเกอร์สาย Blogger ที่อยากให้คนไทยมีบล็อกสวยได้เองโดยไม่ต้องเขียนโค้ด รวบรวมประสบการณ์ทำธีมและ SEO บน Blogger มาเรียบเรียงเป็นคู่มือชุดนี้ > > [Facebook](https://www.facebook.com/patpisan)[Pantip · LuMoo](https://pantip.com/profile/2448725)