Your blog’s main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot.
From this you will display only part of the post and if user wants to read full post , he clicks on the Read more! link and he will be redirected to full text of that post.This is useful when your articles are long.
Note : You should enable Post pages in Settings–>Archiving in order to make this feature work.
1.Go to Layout—>Edit Html
2.Enable Expand Widget Templates
3.Add following Javascript Code immediately above </head> tag
<script type=’text/javascript’>
function truncate_body (postid) {
var id = document.getElementById(postid);
var postbody = id.innerHTML;
var len = postbody.toLowerCase().indexOf("<br");
if(len>0)
postbody = postbody.substring(0, len);
id.innerHTML = "<p>" + postbody + "</p>";
id.style.display="block";
}
</script>
4.Search For <p><data:post.body/></p> And Replace it with following Code:
<b:if cond=’data:blog.pageType != “item”‘>
<div expr:id=’”postid_” + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’> truncate_body("postid_<data:post.id/>"); </script>
<p>
<a class=’read_more’ expr:href=’data:post.url’><b>Read More…</b></a>
</p>
<b:else/>
<p><data:post.body/></p>
</b:if>
