[How to] Customize and Style Read more (Jump Break) option in Blogger

Auto Jump after 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 this should not happen , then follow the given steps to change it.

Go to Template and click “Edit HTML”, check the “Expand Widget Templates” find the below code:

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

Within this code find and delete the following part:

+ "#more"

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

To change the Read More text manually, just replace <data:post.jumpText/> in the above code, 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

To add an image, delete <data:post.jumpText/>  from above code and add your image in it, 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

To style the JUMP BREAK with css, find this code



]]></b:skin>

and put the following code above it

.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;
}

You can change the highlighted codes to match your template