Blogger: แสดงโพสต์ในหน้าแรกเป็นหลายคอลัมน์

การทำให้โพสต์ใน Blogger แสดงเป็นหลายคอลัมน์ในแนวตั้ง (Multi post column) แค่เฉพาะในหน้าแรก
แต่เมื่อมีผู้คลิกเข้าไปอ่านที่บทความจะแสดงเป็นขนาดใหญ่ดังเดิม  ซึ่งสามารถดูตัวอย่างได้จากลิงก์นี้
http://maxlayout-bookcase.blogspot.com/
โดยสามารถทำได้ตามขั้นตอนด้านล่างนี้

อธิบายเพิ่มเติม
แต่หากพบว่าขนาดของบทความที่แก้ไขแล้วตามขั้นตอนที่ 1-3 ยังไม่พอดีกับบล็อกของคุณก็ลองอ่านที่ 'อธิบายเพิ่มเติม' เพื่อให้เข้าใจถึงวิธีปรับขนาดบทความขนาดย่อได้ด้วยตัวเอง

---

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > แก้ไข HTML'

ขั้นตอนที่ 2. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
]]></b:skin>

จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
]]></b:skin>
<!-- multi post column start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <style>
 .post {
  width: 230px;
  height: 300px;
  margin: 5px 5px;
  background: #ffffff;
  overflow: hidden;
  float:left;
  border:1px solid silver;
  }

 .post-outer,
 .post-inner {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  }

 .post-outer {
  display: inline;
  overflow: hidden;
  }

 .blog-pager {
  width: 100%;
  float: left;
  }

 .date-header  {
  display: none;
  }

 .date-outer,
 .inline-ad {
  display: inline;
  border: none;
  float: left;
  background: transparent;
  margin: 0;
  padding: 0;
 }

 .date-posts {
  overflow: hidden;
  display: inline;
  background: transparent;
  }

 </style>
</b:if>
</b:if>
<!-- multi post column end -->

ขั้นตอนที่ 3. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์

---

อธิบายเพิ่มเติม
ถ้าหากขนาดของบทความขนาดย่อที่แสดงอยู่มีขนาดเล็กหรือใหญ่เกินไปไม่เหมาะกับบล็อกของคุณก็สามารถแก้ได้ง่าย ๆ โดยสังเกตโค้ดจากขั้นตอนที่ 2 ในบรรทัดที่ 7-9 โดยมีรายละเอียดดังนี้

บรรทัดที่ 7 ที่เขียนว่า width: 230px; คือความกว้างของบทความขนาดย่อซึ่งสามาถเลือกให้เป็นค่าคงที่เช่น 230px ตามตัวอย่าง หรือให้เป็นเปอร์เซ็นต์เช่น 40% ก็ได้ โดยถ้าหากลดตัวเลขให้น้อยลงมากๆ ก็จะมี Column เพิ่มขึ้นมาอีก
บรรทัดที่ 8 ที่เขียนว่า height: 300px; คือความสูงของบทความขนาดย่อ
บรรทัดที่ 9 ที่เขียนว่า margin: 5px 5px; คือระยะห่างของแต่ละบทความขนาดย่อ
บรรทัดที่ 10 ที่เขียนว่า background: #ffffff; คือสีพื้นหลังของบทความขนาดย่อ

---

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