การสร้าง Read More อัตโนมัติพร้อมกับ Thumbnail (Automatic Post Summary With Thumbnail)

การหน้านี้ผมได้เขียนเรื่องเกี่ยวกับการสร้าง Read More อยู่ 2 ครั้งด้วยก่อน สามารถดูได้ที่นี่

การทำลิงค์ Read More... ให้กับบทความ

การสร้าง Read More อย่างง่าย ๆ จาก Blogger in Draft

ถ้ายังไม่ชอบทั้งสองแบบ ก็ลองศึกษาแบบ Thumbnail ดูว่าจะเหมาะสมกับบล็อกของเราหรือเปล่า มาดูตัวอย่างตามรูปเลยครับ

สิ่งที่จะแสดงออกมาที่หน้าเพ็จแรกของเราก็จะมีรูปภาพ เนื้อหาของบทความอย่างย่อ และปุ่ม Read more >> สำหรับขั้นตอนการทำมีดังต่อไปนี้

ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML แล้วเลือกขยายแม่แบบเครื่องมือ (Layout|Edit HTML -> check the "Expand Widget Templates" check box)

ขั้นตอนที่ 2 ค้นหาโค๊ด </head> แล้ววางโค๊ดต่อไปนี้ไว้ด้านบน

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>

http://blogergadgets.googlecode.com/files/excerpt.js เป็น Java Script ดูโค๊ดและการปรับแต่งด้านล่างสุดของบทความ

การปรับแต่ง
summary_noimg = 230; คือ จำนวนตัวอักษรที่ต้องการแสดงหน้าแรกถ้าบทความนั้นไม่มีรูปภาพ
summary_img = 140; คือ จำนวนตัวอักษรที่ต้องการแสดงหน้าแรกถ้าบทความนั้นมีรูปภาพ
img_thumb_height = 100; คือ ความสูงของรูปภาพ
img_thumb_width = 100; คือ ความกว้างของรูปภาพ

ขั้นตอนที่ 3 ค้นหาโค๊ด <data:post.body/> แล้วนำโค๊ดต่อไปนี้แทนที่ (Replace)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>

การปรับแต่ง
สามารถแก้ไขคำว่า Read More >> เป็นคำอื่น ๆ ที่เราต้องการได้

ขั้นตอนที่ 4 ทำการบันทึกแม่แบบ

เพียงแค่นี้ บทความของเราทุกบทความที่หน้า Home Page ก็จะมีหน้าตาที่เปลี๊ยนไป


Java Script

function removeHtmlTag(strx,chop){

    if(strx.indexOf("<")!=-1)
{

        var s = strx.split("<");

        for(var i=0;i<s.length;i++){

            if(s[i].indexOf(">")!=-1){

                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); }}

        strx =  s.join(""); }

    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";

    var img = div.getElementsByTagName("img");

    var summ = summary_noimg;
    if(img.length>=1) {
   
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;

}
   
        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

การปรับแต่ง (ต้องมี host สำหรับเก็บ Java Script เป็นของตนเอง แล้วแก้ URL http://blogergadgets.googlecode.com/files/excerpt.js เป็นที่ใหม่)

ถ้าต้องการให้รูปภาพอยู่ทางด้านขวามือ ก็ให้แก้ตัวหนังสือสีแดง left เป็น right
ถ้าไม่ต้องการให้แสดงรูปภาพในหน้าหลัก หรือมีเฉพาะตัวหนังสือเท่านั้นก็ให้ลบโค๊ดสีน้ำตาลออก