How to make read more in blogspot

Creating 'After the jump' summaries

Interested to show a select amount of your text from the beginning of each post instead of displaying the entire post on the front page of your blog?

Now Blogger has supported ‘Read more’ function.

Blogger has added new button called “Read More” button or “Jump Break” button which has function to cut off the article on homepage (also known as ‘Read more’ function). When your readers want to read the rest of your post, they can click a “read more” link to see the full or entire post. The good news is that now you can do it without the need for any HTML changes.
The steps are simple and easy, here’s how:

Activate your Blogger new post editor:

• On your dahsboard, click setting and you will be taken to Basic Settings page.
• Scroll down until “Select post editor” option and select “updated editor” and click SAVE SETTING.
  

Go and edit your post and decide where in the post you want tto create the jump break and place your cursor in that position after that simply click the Insert Jump Break toolbar icon.

After you click the Insert Jump Break toolbar icon, a grey bar will appear to show where in the post your break is located (it can be dragged to make any re-position). You also can insert a jump break in Edit HTML mode by typing manually the code: <!-- more -->

When you’re done, publish your post and you will notice the Read More link appear in the place where you set the jump break. If you want to change the Read More text to your own custom phrase, just cimply click Layout from your dashboard, after that click Edit on the Blog Post widget and change the Post page link text to whatever you like.

If you dont use the original template from Blogger, the “Read More” might not appear. If that is the case you need to add a snippet of code to your template. These are the steps:

1. On your dashboard, click Layout and click Edit HTML.
2. Click the Expand Widget Templates checkbox.
3. Find the code like this:
   <data:post.body/>
   
4. Copy and paste the code below exactly below the above code:
   <b:if cond='data:post.hasJumpLink'>
   <div class='jump-link'>
   <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
   </div>
   </b:if >
5. Click SAVE TEMPLATE button and done!