Customize and Style Read more (Jump Break) option in Blogger

Blogger has finally rolled out the Jump Break feature which will add a “Read more” link to every posts if every step is done correctly. That is a great news but if style matters then you have to put some more effort to edit, customize and style it.

There can be so many reasons for why you want to edit the Jump Break link. Within this post I will try to cover most of the reasons and solve most of the problems as far as possible, let us see those.

Fix Auto Jump after clicking Read more Link

Blogger team has solved a great problem by enabling “Jump Break” feature but you may have seen that when the “Read more” link is clicked, it takes to the post of course, but the page jumps to the line after the jump-break has been applied. If you think that it disturbs you and your readers as well then edit the code and fix this by this simple step.

Go to Template tab of your Blogger blog, click “Edit HTML”, check the “Expand Widget Templates” check-box and find the below code:

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

Within this find and delete this snippet:

+ "#more"

The full code will look like:

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

Change the “Read more” Text

If you have followed how to add Read more link in Blogger and create post summaries then you must have find out how to change the default text. But if you still prefer to do it manually then just replace <data:post.jumpText/> with your custom text, example:

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url' expr:title='data:post.title'>Continue reading!</a>
      </div>
    </b:if>

Add Image Instead of Read more Link

There can be so many ways to add image instead of the default “Read more” text of Jump Break, here I will explin the simple one. So same as above example again delete <data:post.jumpText/> and add your image here, example:

    <b:if cond='data:post.hasJumpLink'> 
      <div class='jump-link'> 
        <a expr:href='data:post.url' expr:title='data:post.title'><img src='http://image-URL.png'/></a> 
      </div> 
    </b:if >

Styling the Jump Break Link

If you want it to be simple but more prominent then you can add some styling codes to the Jump Break by using CSS properties without altering the orignal codes, for example, copy paste the below codes before ]]></b:skin> and see how it will looks:

.jump-link a {
 padding: 5px;
 background: #3399bb; /* Have a background colour otherwise delete it */
 color: #ffffff; /* Link colour */
}
.jump-link a:hover {
 background: #666; /* Background colour on hover otherwise delete it. */
 color: #fff; /* Changing the link colour on hover */
 text-decoration: none;
}

Try changing the highlighted colour hex codes and see if it matches with your template style. If you want, then check out the demo.

However, adding CSS with not change the auto jump. Any thing more you want to know about Jump Break?