การทำ auto read more และดึงรูปแรกมาโชว์

 หลังจากที่ผมเคยโพส การทำ read more ไปแล้วครั้งก่อน แต่นั่นให้เราสามารถกำหนดการตัดข้อความเองได้ มาฉบับนี้ จะเป็นการตัดข้อความแบบ Auto 
วิธีการ
1.ให้ Login เข้า blogger แล้วเลือก รูปแบบ-- แก้ไข Html ติ๊กขยายแม่แบบเครื่องมือ
















2.หาโค๊ด  ]]></b:skin>
 copy โค๊ดข้างล่างไปวางต่อท้ายเลยครับ


<script type='text/javascript'>
 summary_noimg = 700;

 summary_img = 420;

 img_thumb_width = 220;

 img_thumb_height = 130;

</script>


<script type='text/javascript'>
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)


(C)2009 by Justuserblog


visit http://justuserblog.blogspot.com to get more cool hacks 
********************************************/
function removeHtmlTag(strx,chop){ 
    if(strx.indexOf(&quot;&lt;&quot;)!=-1)
    {
        var s = strx.split(&quot;&lt;&quot;); 
        for(var i=0;i&lt;s.length;i++){ 
            if(s[i].indexOf(&quot;&gt;&quot;)!=-1){ 
                s[i] = s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length); 
            } 
        } 
        strx =  s.join(&quot;&quot;); 
    }
    chop = (chop &lt; strx.length-1) ? chop : strx.length-2; 
    while(strx.charAt(chop-1)!=&#39; &#39; &amp;&amp; strx.indexOf(&#39; &#39;,chop)!=-1) chop++; 
    strx = strx.substring(0,chop-1); 
    return strx+&#39; ...&#39;; 
}


function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = &quot;&quot;;
    var img = div.getElementsByTagName(&quot;img&quot;);
    var summ = summary_noimg;
    if(img.length&gt;=1) {    
        imgtag = &#39;&lt;span style=&quot;float:left; width: 233px; margin-top: 4px; margin-right: 15px; &quot;&gt;&lt;img src=&quot;&#39;+img[0].src+&#39;&quot; width=&quot;&#39;+img_thumb_width+&#39;px&quot; height=&quot;&#39;+img_thumb_height+&#39;px&quot;/&gt;&lt;/span&gt;&#39;;
        summ = summary_img;
    }
    
    var summary = imgtag + &#39;&lt;div&gt;&#39; + removeHtmlTag(div.innerHTML,summ) + &#39;&lt;/div&gt;&#39;;
    div.innerHTML = summary;
}


</script>




ตัวสีแดงแก้ไขขนาดได้ตามใจชอบเลยครับ 
ต่อ ต่อ ต่อ......
ถ้าอยากให้มีปุ่ม Read more มาดูต่อครับ
หาโค๊ดนี้  <data:post.body/>
แล้ว coppy โค๊ดข้างล่างไปวางต่อท้ายเลยครับ


<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='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read full story</a></span>




ตัวหนังสือสีแดงเปลียนได้ตามใจชอบเลยครับ  
เสร็จแล้วก็ทำการบันทึกแมแบบ


*ก่อนทำทุกครั้งอย่าลืม  ดาวน์โหลดแม่แบบฉบับเต็ม ไว้้ด้วยนะครับ กันพลาด