Blogger: ให้หน้าแรกแสดงภาพตัวอย่างขนาดเล็กพร้อมเนื้อหาที่เราเลือกไว้

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

ซึ่งบทความนี้อาจไม่เหมาะสำหรับผู้เขียนบล็อกที่ไม่ชอบการแก้ไข HTML ภายในแต่ละบทความ โดยสำหรับผู้ที่ต้องการใช้ตัวข้ามเนื้อหาแบบธรรมดาของบล็อกเกอร์ซึ่งง่ายกว่าบทความนี้เยอะก็สามารถทำตามลิงก์นี้ได้ครับ
http://tip.maxlayout.com/2010/08/blogger-insert-jumb-break.html

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

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

กำหนดเนื่้อหาที่ต้องการแสดงในหน้าแรกโดยเขียนว่า
<div class="hide">
เนื้อหาที่แสดงให้เห็นในหน้าแรก
</div>

กำหนดเนื่้อหาที่ต้องการซ่อนจากหน้าแรกโดยเขียนว่า
<div class="seek">
เนื้อหาที่ต้องการซ่อนจากแรก
</div>

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

---

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

---

ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

---

ขั้นตอนที่ 3. จะพบว่าบริเวณข้างใต้โค้ดที่ได้หาเจอนั้นจะมีโค้ดเป้าหมายสำหรับการแก้ไขโค้ดของเรา
เขียนอยู่ในบรรทัดถัดลงมาซึ่งก็คือ
<data:post.body/>

---

ขั้นตอนที่ 4. จากนั้นให้สั่งแทนที่โค้ดเป้าหมายที่จากขั้นตอนที่แล้วซึ่งก็คือ
<data:post.body/>

ด้วยโค้ดข้างล่างนี้
<!-- maxlayout post hide and seek - 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>

<!-- maxlayout clone label and comment counter start -->
    <div class='clone-post-label'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
    </div>
  <br/>
    <div class='clone-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>
  <br/>
<!-- maxlayout clone label and comment counter end -->
<div class='post-hideandseek'>
<data:post.body/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<!-- maxlayout post hide and seek - end -->

---

ขั้นตอนที่ 5. สั่งค้นหา
]]></b:skin>

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

.postthumb {
  float: left;
  overflow: hidden;
  display: inline;
}

.clone-post-label,
.clone-post-comment-counter {
  float: left;
  padding-left: 50px;
  display:block;
}

.post-hideandseek .seek {
  float: right;
  position: absolute;
  padding-left: 50px;
  display: inline;
}
</style>
</b:if>
<!-- maxlayout post index hide and seek - end -->

---

ขั้นตอนที่ 6. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วก็ทำตามส่วนอธิบายด้านบนได้เลย