วิธีทำ Sidebar (ไซด์บาร์) เนื้อหา + แถบข้าง ในธีม Blogger
ไซด์บาร์คือแถบข้างที่วางองค์ประกอบเสริมอย่างหมวดหมู่ ค้นหา และคลังบทความไว้ข้างเนื้อหาหลัก เป็นเลย์เอาต์คลาสสิกที่ช่วยการนำทางในบล็อกที่มีเนื้อหาเยอะ บทความนี้สอนวิธีเพิ่มในธีม Blogger ด้วย BlogKub ที่จัดวางข้างเนื้อหาให้อัตโนมัติ เลือกฝั่งและความกว้างได้ พร้อมวิดเจ็ตที่ใช้บ่อย
สรุปสั้น: เพิ่มบล็อก Sidebar Layout ใน BlogKub ไว้ใกล้กลุ่มบทความ เลือกฝั่ง ซ้าย/ขวา ตั้ง ความกว้าง และเปิดวิดเจ็ตที่ต้องการ (ค้นหา, หมวดหมู่/ป้ายกำกับ, คลังบทความ, เกี่ยวกับผู้เขียน) ระบบจะ จัดไซด์บาร์ให้อยู่ข้างเนื้อหาหลักอัตโนมัติ ตอน Export และ ยุบลงล่างบนมือถือ เพื่อให้เนื้อหาได้พื้นที่เต็ม
ไซด์บาร์คืออะไร และเหมาะกับใคร
ไซด์บาร์ (Sidebar) คือแถบแนวตั้งที่วางอยู่ข้างเนื้อหาหลัก ใช้แสดงองค์ประกอบเสริม เช่น ช่องค้นหา หมวดหมู่ คลังบทความ และข้อมูลผู้เขียน เป็นเลย์เอาต์แบบสองคอลัมน์ที่คลาสสิกและคุ้นเคย โดยเนื้อหาหลักกินพื้นที่ส่วนใหญ่ ส่วนไซด์บาร์เป็นคอลัมน์แคบ ๆ ที่ช่วยการนำทางและให้ข้อมูลเพิ่มเติม
ไซด์บาร์เหมาะกับบล็อกที่มีบทความจำนวนมากและหลายหมวด เพราะวิดเจ็ตอย่างหมวดหมู่และคลังบทความช่วยให้ผู้อ่านสำรวจเนื้อหาได้ง่าย ในทางกลับกัน บล็อกที่เน้นการอ่านยาวแบบโฟกัส หรือดีไซน์มินิมอล อาจเลือกเลย์เอาต์คอลัมน์เดียวเพื่อไม่ให้ไซด์บาร์ดึงความสนใจจากเนื้อหา การเลือกใช้ไซด์บาร์จึงขึ้นกับลักษณะและเป้าหมายของเว็บ
จัดวางอัตโนมัติ: คุณไม่ต้องเรียงคอลัมน์เอง
จุดที่ทำให้ไซด์บาร์ของ BlogKub ใช้ง่ายคือ ระบบจัดวางให้อัตโนมัติ คุณไม่ต้องยุ่งกับการสร้างโครงสร้างสองคอลัมน์เอง เพียงวางบล็อก Sidebar ไว้ใกล้กลุ่มบทความ (เช่น postgrid, postlist หรือ featured) ตอน Export XML ระบบจะจัดให้ไซด์บาร์ไปอยู่ข้างเนื้อหาหลักตามฝั่งและความกว้างที่คุณตั้งไว้
นี่ช่วยประหยัดความยุ่งยากอย่างมาก เพราะการทำเลย์เอาต์สองคอลัมน์ด้วยมือใน Blogger XML เป็นเรื่องซับซ้อนที่ต้องเข้าใจโครงสร้าง section และ CSS การที่ BlogKub จัดการให้หมายความว่าคุณได้เลย์เอาต์ไซด์บาร์ที่ถูกต้องและ responsive โดยเพียงเลือกตัวเลือกไม่กี่อย่าง ไม่ต้องแตะโค้ดเลย
วิธีเพิ่มไซด์บาร์ทีละขั้น
- เพิ่มบล็อก Sidebar เปิดคลังบล็อกด้านซ้าย แล้วลากบล็อก “Sidebar Layout” มาวางไว้ใกล้กลุ่มบทความ (postgrid/postlist/featured) เพื่อให้ระบบรู้ว่าจะวางไซด์บาร์ข้างเนื้อหาส่วนใด
- เลือกฝั่งและความกว้าง เลือกให้ไซด์บาร์อยู่ฝั่งซ้ายหรือขวา และตั้งความกว้าง เช่น 280px ตามความเหมาะสมของเลย์เอาต์
- เลือกวิดเจ็ตในไซด์บาร์ เปิดวิดเจ็ตที่ต้องการ ได้แก่ ช่องค้นหา ป้ายกำกับ/หมวดหมู่ คลังบทความ และเกี่ยวกับผู้เขียน เลือกเฉพาะที่มีประโยชน์กับเว็บของคุณ
- Export XML และตรวจผล กด Export อัปโหลดเข้า Blogger แล้วตรวจว่าไซด์บาร์วางข้างเนื้อหาถูกต้องบนเดสก์ท็อป และยุบลงล่างเนื้อหาบนมือถือ
วิดเจ็ตในไซด์บาร์และประโยชน์ของแต่ละอัน
ไซด์บาร์มีค่าก็ต่อเมื่อวิดเจ็ตในนั้นมีประโยชน์ต่อผู้อ่าน BlogKub มีวิดเจ็ตหลักให้เลือกเปิด
- ช่องค้นหา: ให้ผู้อ่านค้นหาบทความในเว็บได้จากไซด์บาร์ เหมาะกับเว็บที่มีเนื้อหาเยอะ ใช้แนวคิดเดียวกับช่องค้นหาที่วางในตำแหน่งอื่น
- ป้ายกำกับ/หมวดหมู่: แสดงหมวดหมู่ของบล็อกให้ผู้อ่านคลิกไปดูบทความในหมวดที่สนใจ ช่วยการนำทางตามหัวข้อ
- คลังบทความ (Archive): จัดบทความตามช่วงเวลา ให้ผู้อ่านย้อนดูบทความเก่าตามเดือน/ปี เหมาะกับบล็อกที่เขียนสม่ำเสมอ
- เกี่ยวกับผู้เขียน: แสดงโปรไฟล์ผู้เขียน สร้างความเชื่อมโยงและความน่าเชื่อถือ (E-E-A-T) ให้ผู้อ่านรู้ว่าใครเป็นคนเขียน
เคล็ดลับคือเลือกเฉพาะวิดเจ็ตที่ผู้อ่านของคุณได้ประโยชน์จริง ไซด์บาร์ที่ยัดทุกอย่างจนยาวเหยียดจะดูรกและลดความสำคัญของแต่ละส่วน การมีวิดเจ็ตที่พอดีและจัดเรียงตามความสำคัญทำให้ไซด์บาร์ทำหน้าที่ได้ดีที่สุด
ไซด์บาร์บนมือถือ: ยุบลงล่างอัตโนมัติ
ความท้าทายของเลย์เอาต์สองคอลัมน์คือบนมือถือไม่มีพื้นที่พอวางสองคอลัมน์ข้างกัน BlogKub แก้ด้วยการ ยุบไซด์บาร์ลงไปอยู่ด้านล่างเนื้อหาหลักโดยอัตโนมัติบนจอเล็ก ทำให้เนื้อหาหลักได้พื้นที่เต็มความกว้างและอ่านง่าย ส่วนวิดเจ็ตในไซด์บาร์ก็ยังเข้าถึงได้เมื่อผู้อ่านเลื่อนลงมา
การจัดการนี้สำคัญเพราะผู้อ่านส่วนใหญ่เข้าจากมือถือ ถ้าไซด์บาร์ไม่ยุบและบีบเนื้อหาให้แคบ การอ่านก็จะทรมาน การที่ระบบทำ responsive ให้อัตโนมัติหมายความว่าคุณได้ประโยชน์ของไซด์บาร์บนเดสก์ท็อป โดยไม่เสียประสบการณ์การอ่านบนมือถือ นี่คือการออกแบบที่คำนึงถึงทุกอุปกรณ์ตั้งแต่แรก
เลือกฝั่งและความกว้างให้สมดุล
การเลือกฝั่งของไซด์บาร์ส่งผลต่อความรู้สึกของหน้า ไซด์บาร์ ฝั่งขวา เป็นแบบคลาสสิกที่พบบ่อยที่สุด เพราะให้เนื้อหาหลักอยู่ฝั่งซ้ายซึ่งเป็นที่ที่สายตาเริ่มอ่าน ส่วนไซด์บาร์ ฝั่งซ้าย ให้ความรู้สึกเหมือนแผงนำทางที่อยู่ก่อนเนื้อหา เหมาะกับเว็บที่เน้นการนำทางเป็นหลัก ทั้งสองใช้ได้ เลือกตามดีไซน์และความสมดุลที่ต้องการ
ส่วนความกว้าง ค่าราว 280px เป็นจุดที่กำลังดีสำหรับไซด์บาร์ทั่วไป กว้างพอให้วิดเจ็ตแสดงเนื้อหาได้ครบโดยไม่แคบจนอึดอัด และไม่กว้างจนแย่งพื้นที่เนื้อหาหลัก หากตั้งกว้างเกินไป เนื้อหาหลักจะถูกบีบและอ่านยากขึ้น การหาสมดุลระหว่างพื้นที่เนื้อหากับไซด์บาร์จึงเป็นกุญแจของเลย์เอาต์ที่ดี
ไซด์บาร์ vs คอลัมน์เดียว: เทรนด์และการเลือก
ในช่วงหลายปีที่ผ่านมา เว็บจำนวนมากหันไปใช้เลย์เอาต์คอลัมน์เดียวที่โฟกัสเนื้อหา โดยเฉพาะบล็อกสายอ่านยาวและเว็บที่เน้นมินิมอล เหตุผลคือคอลัมน์เดียวช่วยให้ผู้อ่านจดจ่อกับเนื้อหาโดยไม่มีสิ่งรบกวนด้านข้าง และดูทันสมัยสะอาดตา อย่างไรก็ตาม ไซด์บาร์ยังไม่ได้ล้าสมัย มันยังมีประโยชน์ชัดเจนกับเว็บที่การนำทางและการค้นพบเนื้อหาสำคัญ เช่น เว็บที่มีบทความหลายร้อยชิ้นหลายหมวด
การเลือกจึงไม่ใช่เรื่องถูกหรือผิด แต่เป็นเรื่องของเป้าหมาย ถ้าเว็บของคุณต้องการให้ผู้อ่านสำรวจหลายบทความและนำทางตามหมวด ไซด์บาร์ช่วยได้มาก แต่ถ้าเป้าหมายคือให้ผู้อ่านจดจ่อกับบทความเดียวจนจบ คอลัมน์เดียวอาจเหมาะกว่า ข้อดีของ BlogKub คือคุณเลือกได้ทั้งสองแบบและสลับได้ตามต้องการ ทดลองดูว่าแบบไหนเข้ากับผู้อ่านและเนื้อหาของคุณมากที่สุด
ปัญหาที่พบบ่อยและวิธีแก้
ไซด์บาร์ไม่อยู่ข้างเนื้อหา
ตรวจว่าวางบล็อก Sidebar ไว้ใกล้กลุ่มบทความ (postgrid/postlist/featured) เพราะระบบใช้ตำแหน่งนี้จัดวางไซด์บาร์ข้างเนื้อหา หากวางห่างจากกลุ่มบทความ การจัดวางอาจไม่เป็นไปตามคาด
เนื้อหาหลักแคบเกินไป
อาจตั้งความกว้างไซด์บาร์มากเกินไป ลองลดความกว้าง (เช่นกลับมาที่ 280px) เพื่อคืนพื้นที่ให้เนื้อหาหลัก
วิดเจ็ตในไซด์บาร์ไม่แสดง
ตรวจว่าเปิดวิดเจ็ตที่ต้องการและ Export ใหม่แล้ว บางวิดเจ็ต เช่น คลังบทความ จะแสดงเมื่อมีบทความพอให้จัดกลุ่มตามเวลา
ไซด์บาร์บนมือถือดูรก
เพราะไซด์บาร์ยุบลงล่าง หากมีวิดเจ็ตเยอะจะทำให้ส่วนล่างยาว ลองลดจำนวนวิดเจ็ตให้เหลือเฉพาะที่จำเป็นเพื่อให้มือถือกระชับ
แนวทางปฏิบัติที่ดี (Best Practices)
- วางบล็อก Sidebar ใกล้กลุ่มบทความเสมอ เพื่อให้ระบบจัดวางข้างเนื้อหาถูกต้อง
- เลือกเฉพาะวิดเจ็ตที่ผู้อ่านได้ประโยชน์จริง อย่ายัดทุกอย่างจนไซด์บาร์ยาวและรก
- ตั้งความกว้างที่สมดุล (ราว 280px) เพื่อไม่บีบเนื้อหาหลัก
- พิจารณาว่าเว็บของคุณเหมาะกับไซด์บาร์หรือคอลัมน์เดียว ตามลักษณะเนื้อหา
- ใช้วิดเจ็ตค้นหาและหมวดหมู่ร่วมกับเบรดครัมบ์เพื่อระบบนำทางที่ครบถ้วน
สรุป
ไซด์บาร์เป็นเลย์เอาต์คลาสสิกที่ช่วยการนำทางในบล็อกที่มีเนื้อหาเยอะ ด้วยการวางองค์ประกอบเสริมอย่างค้นหา หมวดหมู่ คลังบทความ และข้อมูลผู้เขียนไว้ข้างเนื้อหาหลัก ด้วย BlogKub คุณเพียงวางบล็อก Sidebar ใกล้กลุ่มบทความ เลือกฝั่งซ้าย/ขวา ตั้งความกว้าง และเปิดวิดเจ็ตที่ต้องการ ระบบจะจัดไซด์บาร์ให้อยู่ข้างเนื้อหาอัตโนมัติตอน Export และยุบลงล่างบนมือถือเพื่อรักษาประสบการณ์การอ่าน โดยที่คุณไม่ต้องแตะโค้ดเลย เมื่อเลือกวิดเจ็ตที่มีประโยชน์จริงและตั้งความกว้างให้สมดุล ไซด์บาร์จะช่วยให้ผู้อ่านสำรวจเนื้อหาของคุณได้ง่ายขึ้น ซึ่งเหมาะอย่างยิ่งกับบล็อกที่สะสมบทความไว้จำนวนมาก
คำถามที่พบบ่อย (FAQ)
Sidebar วางที่ไหน และวางเองไหม?
ไม่ต้องวางเอง วางบล็อก Sidebar ไว้ใกล้กลุ่มบทความ (postgrid/postlist/featured) ระบบจะจัดให้ไซด์บาร์อยู่ข้างเนื้อหาหลักโดยอัตโนมัติตอน Export XML คุณเพียงเลือกฝั่งซ้ายหรือขวาและความกว้าง
ใส่อะไรในไซด์บาร์ได้บ้าง?
มีวิดเจ็ตให้เลือกเปิด เช่น ช่องค้นหา ป้ายกำกับ/หมวดหมู่ คลังบทความ (archive) และเกี่ยวกับผู้เขียน (โปรไฟล์) เลือกเฉพาะที่ต้องการเพื่อให้ไซด์บาร์มีประโยชน์โดยไม่รก
ไซด์บาร์แสดงบนมือถืออย่างไร?
บนมือถือที่พื้นที่จำกัด ไซด์บาร์จะยุบลงไปอยู่ด้านล่างเนื้อหาหลักโดยอัตโนมัติ เพื่อให้เนื้อหาหลักได้พื้นที่เต็มความกว้างและอ่านง่าย ผู้อ่านยังเข้าถึงวิดเจ็ตในไซด์บาร์ได้เมื่อเลื่อนลง
เลือกฝั่งซ้ายหรือขวาดีกว่า?
ขึ้นกับแนวเว็บ ไซด์บาร์ขวาเป็นแบบคลาสสิกที่พบบ่อยและให้เนื้อหาอยู่ฝั่งซ้ายตามการอ่าน ส่วนไซด์บาร์ซ้ายให้ความรู้สึกเหมือนแผงนำทาง ทั้งสองใช้ได้ เลือกตามดีไซน์และความสมดุลของหน้า
ไซด์บาร์เหมาะกับบล็อกแบบไหน?
เหมาะกับบล็อกที่มีบทความจำนวนมากและหลายหมวด เพราะไซด์บาร์ช่วยการนำทางด้วยหมวดหมู่ คลังบทความ และค้นหา ส่วนบล็อกที่เน้นความเรียบง่ายหรืออ่านยาวอาจเลือกเลย์เอาต์คอลัมน์เดียวเพื่อโฟกัสเนื้อหา