Read more

How to : Auto Read More for Blogger มาทำ read more แบบออโต้ให้หน้าแรกของบล็อกกันเถอะ

บท ความนี้เกิดจากความพยายามในการแต่งบล็อคของเราเอง เมื่อเราไม่อยากให้หน้าแรกในบล็อคมันโชว์ข้อความยาวๆ มันดูรกๆ เห็นบล็อคคนอื่นจะโชว์ข้อความแค่บางส่วน ถ้าอยากอ่านต่อก็กด "Read more"  อืมม.. เก๋ดีนะ จะได้โชว์ตัวอย่างบทความให้คนที่เข้าเวปมา ถ้าเค้าสนใจก็จะได้กดอ่านบทความด้านในด้วย

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



ก่อนอื่นไปที่บล็อคของเรา แล้วเข้าไปที่ Theme เลือก Edit HTML ก็ จะเจอหน้าตาของภาษา HTML ก็ไม่ต้องตกใจ อย่าไปลบไปเพิ่มอะไรมั่วซั่วก็พอแล้ว (เพื่อความสบายใจ ก็เซฟไฟล์สำรองกันเอาไว้ก่อนดีกว่านะจ้ะ)

จากนั้นก็ กด Crt+F ใน HTML เพื่อค้นหาโค๊ดนี้  <data:post.body/>
ซึ่งตรงนี้เราอาจค้นเจอหลายโค๊ด แต่เราสนใจแค่โค๊ดตัวที่สอง เท่านั้นนะคะ
แล้วก็แทนที่โค๊ดนั้นด้วยโค๊ดต่อไปนี้ ย้ำว่า"แทนที่" นะจ้ะ
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

กด Crt+F ใน HTML เพื่อค้นหาโค๊ดนี้ต่อ </head>
คราวนี้ก็วางโค๊ดต่อไปนี้ ในบรรทัดก่อนหน้าโค๊ดที่เราต้องการ
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

หมายเหตุ : ตัวเลขสีแดง คือขนาดที่เราสามารถปรับเปลี่ยนให้เหมาะกับบล็อคของเราได้จ้า
490 ในบรรทัดแรก คือจำนวนตัวอักษรถ้าบทความนั้นไม่มีรูปภาพ
400 ในบรรทัดที่สอง คือจำนวนตัวอักษรถ้าบทความนั้นมีรูปภาพ
120 ในบรรทัดที่ 3,4 คือขนาดของรูปภาพที่จะให้แสดงในหน้าแรก

เสร็จแล้วก็ลองกดพรีวิวดูตัวอย่างก่อนบันทึก ถ้าพอใจแล้วก็กด save templete (บันทีกเทมเพลต) แค่นี้เราก็ได้หน้าแรกแบบมีลิงค์ read more แย้ววว เย้!!

ลองทำกันดูนะคะ ไม่น่ายากเกินไปเน๊าะ ถ้าทำแล้วพลาดยังไงก็โหลดไฟล์ที่เราสำรองไว้มาแก้อีกทีนะคะ

ขอบคุณที่มา : http://helplogger.blogspot.com/2012/03/auto-read-more-with-thumbnail-for.html

โพสต์เมื่อ 17th April โดย Yink Chiinlove

ป้ายกำกับ: Read more