Blogger: ให้หน้าแรกแสดงเพียงชื่อบทความ ภาพตัวอย่าง และตัวนับจำนวนคอมเมนต์

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

---

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

---

ขั้นตอนที่ 2. เลือกโค้ดสำหรับแสดงภาพตัวอย่างขนาดย่อดังนี้
โดยสั่งค้นหา
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

ในบริเวณจุดที่หาเจอนั้นถ้าหากนับลงด้านล่างมาประมาณ 7 บรรทัดจะพบโค้ดเป้าหมายสำหรับการสร้างภาพตัวอย่างของเรา
ซึ่งโค้ดเป้าหมายที่ต้องแก้ไขได้ถูกเขียนเอาไว้ว่า
    <a expr:name='data:post.id'/>
โดยให้แทนที่โค้ดเป้าหมายดังกล่าวนั้นด้วยโค้ดแบบใดแบบหนึ่งข้างล่างนี้

---

ชนิดที่ 2.1 ต้องการให้รูปตัวอย่างแสดงเป็นสี่เหลี่ยมจตุรัส

ซึ่งโค้ดขนิดสี่เหลี่ยมจตุรัสนี้ก็คือ
    <a expr:name='data:post.id'/>
<!-- maxlayout crop thumbnail link to post start -->
<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=250;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a></b:if>
<!-- maxlayout crop thumbnail link to post end -->

โดยสามารถแก้ไขขนาดภาพตัวอย่างได้จากในบรรทัดที่ 8 ซึ่งถูกเขียนเอาไว้ว่า
var image_size=250;
ให้เป็นขนาดใหม่ได้ตามต้องการ

---

ชนิดที่ 2.2 ต้องการให้รูปตัวอย่างแสดงเป็นสี่เหลี่ยมผืนผ้าที่สูงและกว้างไม่เท่ากัน

ซึ่งโค้ดขนิดสี่เหลี่ยมผืนผ้านี้ก็คือ
    <a expr:name='data:post.id'/>
<!-- maxlayout crop thumbnail link to post start -->
<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_height=300;
var image_width=400;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_height+'-c/')+'" class="postthumb" alt="'+post_title+'" height="'+image_height+'" width="'+image_width+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>
</b:if>
<!-- maxlayout crop thumbnail link to post end -->

โดยสามารถแก้ไขขนาดภาพตัวอย่างได้จากในบรรทัดที่ 8 และ 9 ซึ่งถูกเขียนเอาไว้ว่า
var image_height=300;
var image_width=400;
ให้เป็นความกว้างและสูงใหม่ได้ตามต้องการ

---

ขั้นตอนที่ 3. ซ่อนเนื้อหาขณะอยู่ในหน้าแรก
โดยสั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดใหม่นี้
]]></b:skin>
<!-- maxlayout hide post detail start -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
.post-header,
.post-body,
.jump-link,
.post-footer {
  display: none;
}
</style>
</b:if>
<!-- maxlayout hide post detail end -->

---

ขั้นตอนที่ 4. แสดงตัวนับคอมเมนต์
โดยสั่งค้นหา
    <b:if cond='data:post.hasJumpLink'>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดใหม่นี้
<!-- maxlayout clone comment counter start -->
    <div class='post-comment-counter'>
      <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
    </div>
<!-- maxlayout clone comment counter end -->
    <b:if cond='data:post.hasJumpLink'>

---

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

---

อธิบายเพิ่มเติมวิธีย้ายชื่อบทความให้ไปอยู่ทางขวาของรูปตัวอย่าง

สามารถทำได้โดยปรับโค้ดในขั้นตอนที่ 3 และ 4 ใหม่ให้เป็นดังข้างล่างนี้

เปลี่ยนโค้ดสำหรับแทนที่ในขั้นตอนที่ 3 ให้เป็น
]]></b:skin>
<!-- maxlayout hide post detail start -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
h3.post-title.entry-title,
.post-header,
.post-body,
.jump-link,
.post-footer {
  display: none;
}
.post-outer {
  min-height: 60px;
}
.postthumb {
  overflow: hidden;
}
.post-show-index {
  position: absolute;
  display: inline;
  padding: 0 0 0 10px;
}
.post-comment-counter {
  padding: 10px 0 0 0;
}
</style>
</b:if>
<!-- maxlayout hide post detail end -->

เปลี่ยนโค้ดสำหรับแทนที่ในขั้นตอนที่ 4 ให้เป็น
<!-- maxlayout clone comment counter start -->
  <div class='post-show-index'>
    <div class='post-title-index'>
    <b:if cond='data:post.title'>
    <h3>
      <div class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </div>
    </h3>
    </b:if>
    </div>
    <div class='post-comment-counter'>
      <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
    </div>
  </div>
<!-- maxlayout clone comment counter end -->
    <b:if cond='data:post.hasJumpLink'>

---