วิธีเพิ่ม 2 Column บน Sidebar ของ Blogger

สอนทำบล็อก วิธีทำ bloggerการเพิ่ม Column บน Sidebar ของ Blogger Template ที่มีเพียง 2 Column ให้มี Column เพิ่มขึ้นมาอีก 2 Column (เล็กๆ) เพื่อแก้ปัญหาความต้องการในการติดตั้ง Gadget ที่ไม่ต้องใช้พื้นที่มากนัก และเมื่อดำเนินการตามบทความนี้แล้ว ผลลัพธ์ที่ได้จะเหมือนรูปตัวอย่างทางซ้ายมือ

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

รูปของ Minima Template

วิธีสร้าง blog

ขั้นเตรียมการ

ก่อนจะติดตั้ง New Sidebar Column ลงไป คุณจะต้องวิเคราะห์ แม่แบบของคุณเองให้เข้าใจก่อนว่าโค้ดของ Sidebar ปัจจุบันนั้นใช้ id หรือ class ว่าอะไร โดยให้ค้นหา(กด Ctrl+F) keyword ที่สัมพันธ์กับ Sidebar เช่นคำว่า Sidebar หรือ Sidecat หรือ Sidebar-wrapper เป็นต้น

หลังจากที่วิเคราะห์ Minima Template แล้วพบ CSS ที่กำหนดพื้นที่ ความกว้าง และ Style อื่น ๆ อยู่ 2 ส่วนคือ
#Sidebar-wrapper
และ
.sidebar
โค้ด #Sidebar-wrapper เป็น CSS Style ที่กำหนดพื้นที่และความกว้างของ Sidebar ในที่นี้กำหนดความกว้างไว้ 310px

ทำ blog

ส่วนโค้ด .sidebar เป็นการกำหนด Style อื่น ๆ

โค้ด Blogger Template
และในส่วน HTML ก็จะมีการกำหนดพื้นที่ไว้เพียงตำแหน่งเดียวดังรูปด้านล่าง

แต่ง blog
โค้ดแต่งบล็อก


ขั้นตอนการติดตั้ง New Sidebar Column

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

ขั้นที่ 1 กำหนด CSS Style ของ Column ใหม่โดย ค้นหาโค้ด ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

#newsidebar{width:310px;}
#leftsidebar{float:left;width:150px;}
#rightsidebar{float:right;width:150px;}
► ความกว้างของ #newsidebar กำหนดให้เท่ากับความกว้างของ Sidebar เดิมใน template ของคุณ ในตัวอย่างนี้จะต้องกำหนด 310 px

► ความกว้างของ #leftsidebar และ #rightsidebar กำหนดได้ตามใจ
   แต่ ผลรวมจะต้องไม่เกินความกว้างของ #newsidebar ซึ่งในที่นี้คือ 310px

► ในที่นี้จะไม่กำหนด Style อื่น ๆ เพิ่มเติม แต่ผมจะอาศัย CSS Style ของ Template เดิมในการติดตั้ง (เพื่อให้ง่าย)




ขั้นที่ 2 ค้นหาโค้ด <div id='sidebar-wrapper'>
( ซึ่งถ้าเป็น Template ของคุณอาจะเจอโค้ดที่ไม่ตรงกับตัวอย่างนี้แต่จะคล้ายคลึงกัน )

เมื่อพบแล้วให้วางโค้ดต่อไปนี้ถัดจากโค้ด </b:section> ที่อยู่ภายใต้ <div id='sidebar-wrapper'> ดังรูป

วิธีสร้างบล็อก
โค้ด HTML สำหรับติดตั้ง
<div id='newsidebar'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'/>
<b:section class='sidebar' id='rightsidebar' preferred='yes'/>
</div>

วิธีสร้าง blogspot
เมื่อวางโค้ดลงไปในตำแหน่งดังกล่าวก็ทำการบันทึกแม่แบบ ก็ถือว่าจบขั้นตอนการติดตั้งครับ

หมายเหตุ สังเกตว่าเรายังใช้ class='sidebar' เช่นเดียวกับ Sidebar เดิมเพราะเราจะอาศัย CSS Style ของ Sidebar เดิมในการติดตั้ง
 

ขั้นที่ 3 สังเกตว่ามีพื้นที่บน Sidebar เพิ่มมาอีก 2 Column แล้ว คุณสามารถเพิ่ม Gadget ในบริเวณดังกล่าวได้ตามปกติ แต่ถ้าหากมีปัญหาเรื่องความกว้างให้กลับไปปรับแต่งความกว้างใน CSS ของขึ้นที่ 1

วิธีทำ blogspot

บทสรุป วิธีการในตัวอย่างนี้เป็นการกำหนดขนาดพื้นที่ขึ้นมาอีก 2 Column และแทรกต่อจาก Sidebar เดิมที่มีอยู่แล้ว และใช้ CSS Sytle ของSidebar เดิมทุกประการ

สุดท้ายหวังว่าบทความนี้จะบทความเป็นประโยชน์สำหรับชาว blogger อีก 1 บทความนะครับ ถ้าหากถูกใจบทความใดก็อย่าลืมบอกต่อและให้กำลังใจกันบ้างนะครับ สวัสดีครับ

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

  1. #newsidebar{width:310px;}
    #leftsidebar{float:left;width:150px;}
    #rightsidebar{float:right;width:150px;}

    ต้องวางโค๊ดด้านบนไว้ก่อน ]]>หรือเปล่าครับ ผมวางไว้ถัดจากโค๊ดดังกล่าวแล้วไม่ได้

  1. @ardulb: ขอบคุณที่แจ้งมาครับ ผมพิมพืผิดครับ ต้องวางเอาไว้ก่อนหน้าโค้ด ]]></b:skin> ถูกต้องครับ

  1. ขอคำแนะนำสำหรับบางธีมที่มี sidebar อยู่ด้านเดียว แล้วอยากจะเพิ่มเป็น 2 ด้านอ่ะคะ เช่น ธีมเก่ามี ด้านขวา อยากเพิ่มให้มีด้านซ้าย เป็น 3 collum ต้องทำยังไงคะ ขอขอบคุณคะ

  1. @friend: ถ้าใช้แม่แบบรุ่นใหม่ก็สามารถใช้เครื่องมือออกแบบปรับให้เป็น 3 คอลัมน์ได้เลย

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

  1. ถ้าหากเป็นคอลัมน์ของบทความสามารถแยกเป็น 2 คอลัมน์ได้มั้ยครับ (ถ้าได้ต้องทำอย่างไร

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

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

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