How To Change Read more style in Blogger

Is there a big different between your and my template ? hmm ? oh , yes , in my home page I have a Magazine type template with a Read More buttons and you have a blog with a homepage of posts that show their whole body and take a long time to load. And also it makes your blog more longer. ( If you are posting more than 5 posts per a page ). So , do you want to know how to add 'Read More' buttons and make your blog more profeesional ? so here is the way !


Fisrt of all , go to the Settings tab , then select Formatting tab and go to the option Show. Now add a number more than 5. ( Here in my blog , I keep about 15-20 posts in homepage )

Now

1. Edit your Template
2. Now find out 

<data:post.body/> 

( press 'Ctrl' + F to open your browser's search box)

Now Replace 

<data:post.body/> 

with these codes. Make sure that you REPLACE this line. In some templates , I have seen a line as 

<p><data:post.body/></p> 

instead of 

<data:post.body/>. 

If then replace the whole 

<p><data:post.body/></p> 

line with follwing lines.

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 0;
img_thumb_width = 0; 
</script>
<script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&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='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Now follow the Safety Saving Steps.

And 

That's it , now your blog will too get converted to a Magazine type template as following photo.

Do you like to add a Image too ? like in this photo ?

Then change these two lines of codes

img_thumb_height = 0;
img_thumb_width = 0;

to

img_thumb_height = 80;
img_thumb_width = 100; 

or any hieght and width that you like to have.


If you want to increase your post's height ,

summary_noimg = 400;
summary_img = 300;

change these to any amount you need !
summary_noimg = 400; stand for the post's hieght without a Image.
summary_img = 300; stand for the post's hieght with the Image.