ใส่ Read More อัตโนมัติพร้อมรูปภาพ

การใส่ Read More อัตโนมัติพร้อมรูปภาพ (Auto Read More with Thumbnails) คือ การทำ Read More แบบอัตโนมัติ โดยที่ระบบจะทำการตัดข้อความ ตามจำนวนอักษรที่เราได้กำหนดไว้ เราไม่ต้องมานั่งใส่ read more ทุกบทความที่เราเขียน นอกจากนี้ยังมีการดึงรูปภาพในบทความนั้นมาประกอบด้วย โดยที่เราสามารถกำหนดขนาดรูปภาพได้ หากนึกไม่ออกว่ามันเป็นยังไง นี่คือรูปตัวอย่าง

จากรูปตัวอย่าง

รูปภาพด้านซ้ายมือจะแสดงขนาดตามที่เราได้กำหนดไว้ ส่วนเนื้อหาด้านข้างก็จะแสดงตามจำนวนตัวอักษรที่เรากำหนดไว้เช่นกัน อักษรที่เกินกำหนดจะถูกตัดไว้สำหรับให้ผู้อ่านกด Read More เพื่อเข้าไปอ่าน

รูปภาพที่เห็นจะถูกปรับขนาดจากขนาดรูปภาพจริงที่แสดงในเนื้อหาทั้งหมด เป็นขนาดที่เรากำหนดไว้ นั่นหมายความว่ามันจะถูกย่อลง หรือขยายขึ้นตามกำหนด ฉะนั้นมันจึงมีข้อเสีย คือ หากรูปภาพจริงมีขนาดใหญ่กว่ามาก มันก็จะถูกย่อลงมา ซึ่งรูปที่ได้อาจจะดูไม่สวยงามซักเท่าไหร่ แต่ถ้าขนาดรูปภาพจริงมีขนาดที่เหมาะสม เช่นว่า เรากำหนดขนาดไว้ 100 x 100 แล้วขนาดรูปภาพจริงมีขนาด 500 x 500 ซึ่งรูปที่ถูกย่อมาก็ยังดูดี

วิธี Add Auto Read More with Thumbnails

1) ไปที่ Template - -> Edit HTML

จะให้ดี ควรก็กด Backup Template ไว้ก่อน (วิธี Backup / Restore Blogger Template/Layout)

2 ) กด (Ctrl+F) หาแทก </head>
3) เมื่อเจอแล้ว ใส่โค๊ตด้านล่างนี้ไว้ข้างหน้า

<script type="text/javascript">
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type="text/javascript">
//<![CDATA[
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;
}

//]]>
</script>

4) กดหา <data:post.body/> แล้วแปะโค๊ตด้านล่างนี้เข้าไปแทนที่ (วางทับอันเก่าไปเลย)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

5) กด Preview ถ้าไม่มีปัญหา กด Save


การปรับแต่ง

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230; <---- [จำนวนตัวอักษรถ้าไม่มีรูปภาพ]
summary_img = 140; <------ [จำนวนตัวอักษรถ้ามีรูปภาพ]
img_thumb_height = 100; <---- [ความสูงของรูป]
img_thumb_width = 100; <---- [ความกว้างของรูป]
</script>
<script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>

หมายเหตุ : จำนวนตัวอักษรถ้าไม่มีรูปภาพ = ถ้าในบทความของเราไม่มีรูป

เรียบเรียงเนื้อหาจาก : Anshuldudeja.com

 

 

แก้ไขเนื้อหาล่าสุด : 13 พ.ค. 56