Add 'Read More.." button in your Blogger/Blogger Post

Why Add 'Read More' button ?
Answer is here, Once you look for any content on any site there are lots of information present on the website. So all the information can not be shown on one page and to do that we need to show post/content with few detail with Read More option. And the user need to select this button to view the detailed information.

How to Add Auto 'Read More..' button ?
1. Login in to your blogger website
2. Go to Template -> Edit HTML
3. Go to HTML details and press Ctrl + F (for searching) and look for

<data:post.body/>

4. Replace the above code with below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read more...</a></span><a href='http://www.pkrkinth.blogspot.com'/>
</b:if>
</b:if>

Note - If <data:post.body/> is present at more than one place then replace it at all places.

5. Now search for

<head/>

6. Copy paste the below code above of <head/>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400;  /* Summary length if no image*/
summary_img = 300; /* Summary length with image*/
img_thumb_height = 200; /*Image Height*/
img_thumb_width = 200; /*Image Width*/
</script>
<script type='text/javascript' src='http://netoopscodes.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js' ></script>

7. Save the Template.

Congratulations!!! You are done.