Blogger: ให้หน้าแรกแสดงเฉพาะภาพตัวอย่างซึ่งลิงก์สู่บทความได้

Updates 2014/09/05

---

วิธีนี้เป็นการทำให้หน้าแรกแสดงเฉพาะภาพตัวอย่างที่สามารถลิงก์เข้าสู่บทความได้โดยอัตโนมัติ (Automatic Sample Image Hyperlink to Post Page)

โดยการแสดงเนื้อหาแบบนี้มักถูกใช้กับบล็อกรวมรูปถ่าย หรือเว็บอ่านการ์ตูน ที่ต้องการให้ในหน้าแรกแสดงแต่เฉพาะภาพหน้าปกที่เป็นรูปแรกของแต่ละบทความ แต่เมื่อผู้อ่านคลิกลงบนภาพนั้นก็จะเป็นการสั่งเปิดเนื้อหาแบบเต็มขึ้นมาซึ่งสามารถดูตัวอย่างได้จากลิงก์นี้
https://shopinbottle.blogspot.com

โดยในขั้นตอนที่ 3 นั้นจะมีโค้ดให้เลือกอยู่ 2 แบบคือ
- ชนิดที่ 1 รูปตัวอย่างจะแสดงเป็นสี่เหลี่ยมจตุรัส

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

อธิบายเพิ่มเติม
แต่ถ้าต้องการวิธีแสดงบทความย่อพร้อมภาพตัวอย่างแบบอัตโนมัติให้ทำตามลิงก์อันนี้แทนครับ
http://tip.maxlayout.com/2009/11/blogger_8859.html

---

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

---

ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาตำแหน่งของโค้ดบทความซึ่งในปัจจุบันมีอยู่หลายแบบขึ้นอยู่กับลักษณะเทมเพลทบล็อกเกอร์ที่คุณกำลังใช้อยู่
ถ้าหากไม่ใช่บล็อกที่ผู้พัฒนาภายนอกเขียนได้ขึ้นมาเป็นรูปแบบส่วนตัว แล้วละก็จะพบได้ 3 กรณีซึ่งถ้าพบโค้ดในกรณีใดเสร็จแล้วก็ให้ข้ามไปทำขั้นตอนต่อไปได้เลย

กรณีที่ 1. ให้ค้นหา
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
โดยถ้าหาโค้ดนี้ไม่พบก็ให้ทำตามกรณีที่ 2 ต่อได้เลย
จะพบว่าบริเวณข้างใต้โค้ดที่ได้หาเจอนั้นจะมีโค้ดเป้าหมายสำหรับการแก้ไขโค้ดของเรา
เขียนอยู่ในบรรทัดถัดลงมาซึ่งก็คือ
<data:post.body/>

กรณีที่ 2. ให้ค้นหา
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'
โดยถ้าหาโค้ดนี้ไม่พบก็ให้ทำตามกรณีที่ 3 ต่อได้เลย
จะพบว่าบริเวณข้างใต้โค้ดที่ได้หาเจอนั้นจะมีโค้ดเป้าหมายสำหรับการแก้ไขโค้ดของเรา
เขียนอยู่ในบรรทัดถัดลงมาซึ่งก็คือ
<data:post.body/>

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

---

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

---

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

ซึ่งโค้ดขนิดสี่เหลี่ยมจตุรัสนี้ก็คือ
<!-- 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'>
var thumbnailUrl = &quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/><b:else/></b:if>&quot;
document.write(bp_thumbnail_resize(thumbnailUrl,&quot;<data:post.title/>&quot;));
</script></a>
<b:else/>
<data:post.body/>
</b:if>
<!-- maxlayout crop thumbnail link to post end -->

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

---

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

ซึ่งโค้ดขนิดสี่เหลี่ยมผืนผ้านี้ก็คือ
<!-- 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'>
var thumbnailUrl = &quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/><b:else/></b:if>&quot;
document.write(bp_thumbnail_resize_rect(thumbnailUrl,&quot;<data:post.title/>&quot;));
</script></a>
<b:else/>
<data:post.body/>
</b:if>
<!-- maxlayout crop thumbnail link to post end -->

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

---

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

---

อธิบายเพิ่มเติม
ภาพตัวอย่างที่ถูกนำมาแสดงเมื่อในบทความไม่มีรูปที่ผมกำหนดไว้ ซึ่งสามารถกำหนดใหม่ได้เองตามต้องการ จะอยู่ในบรรทัดที่ 9 ของทั้ง 2 แบบคือ
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE-JYGU8cufFycW5jD3UP0qxCTqAzlNL3AGzZE28NnOqlZHdFmotYZ6X4HETTwOw7IndnYvZV5QYN94GJWuxZB8YjJch0xbWnGbzPGRQbEg8OkvsOpGQktsvyNcO59Xl4B_Hp-dzDcWo/s250/maxlayout-pencil-blogger-no-image-2013.png

ถ้าหากรูปภาพที่แสดงในบทความบล็อกของคุณ ถูกอัพโหลดไว้กับบริการรับฝากรูปภาพบางแห่งที่ไม่ใช่ของ Blogger หรือ Picasa ก็อาจทำให้รูปเหล่านั้นถูกแสดงได้ไม่ครบถ้วนครับ
เช่นที่คุณสังคม คนออนไลน์ ได้พบว่าถ้าหากฝากรูปไว้ที่ upic.me ก็อาจมีบางรูปไม่ถูกดึงมาแสดงเป็นภาพตัวอย่างจากวิธีในบทความนี้ครับ