How to Make an Auto Read More Template

How to Make an Auto Read More Template - This method has been applied in many blog template modifications.

These tips for those of you who use blog templates that have not displayed a summary of posts on the front page, aka the appearance is the same as the single post / single page.

Generally, blog templates now automatically use auto read more or display a summary of posts on the front page of the blog.
How to Make an Auto Read More Template

1. Click "Template"> "Edit HTML"
2. Search (CTRL + F) code <data:post.body/>.
If there are more than two <data:post.body/>, select the second one. If it fails, select the third or first, etc. Just try one on one until it works.
3. Replace or replace the <data:post.body/> code with the code below

<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>

4. Look for the code </head> and copy the following code right above it

<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>

5. Save the Template

You can change the size of the image / thumbnail by changing the number 120 to smaller or larger.
You can also change the number / length of characters by replacing the 490 number (if the post is without photos) and the number 400 (if the post has a photo).

Thus How to Make an Auto Read More Template, thank you for visiting. Greetings Blogger.