How to add Read More option - Officially from Blogger

If you are looking for a hack to add Read more to Blogger to hide full posts, then stop searching because Blogger has now officially announced this option for us which is also known as Jump Break.

Now you don't have to add any separate hack in your template. What you have to do is enable some options in your Blogger settings and you are ready to use this feature. Thinking what are the options you have to enable! Well, let us find out.

While posting a new post, write a paragraph, use the "jump break" option and continue writing again. This is the option which will add the read more link to your posts on your homepage.

In HTML mode of Blogger Post Editor, you can have this by adding <!--more--> where you want to position the "jump break". Example:

First paragraph starts.
<!--more-->
Rest of the posts goes here.

Change the "Read more" Text

If you want to change the default text of the Jump Break to something else then go to Layout tab under your blog's dashboard, click the "Edit" link on Blog Posts gadget and then change to whatever you want, like, "Continue reading...". Don't forget to save it.

Adding Read More to Blogger Templates

First check if you already have got it by applying "jump break" to one of your posts form Post Editor. If you still can not see it then you have customised your template or have downloaded it form another source. For this you need to add following code to your template to enable it. To do this, go to Template tab, click "Edit HTML" and check "Expand Widget Templates".

Find <data:post.body/> and add the following code below it:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Save your template and you will get this for your template.

Next: Customize and style the Read More/Jump Break link in Blogger.

Official announcement: You Might As Well Jump!