Create Expandable Post or Read more Hack

In this method first paragraph will be used as post summary. You will view the full post after clicking "Read More..." link. Note, you must enable post pages in order to using this feature. Also backup your template html before editing it.

Now follow these instructions:

1. Go to your blogger setting panel -> Template -> Edit HTML

2. Check on "Expand Widget Templates

3. Search for </head> & replace it with following javascript code:

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

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>

4. I have tested this code and it works! If you have any questions comment on it.

How to have label Cloud on your Blog