Customize and Style Read more option in Blogger

Customization like, changing the default "Read more" text or adding an image instead of read more link or the fix for the new option which takes you to that particular page obviously, but it jumps to the line after the "jump-break" option has been applied, when clicked. If you don't want this to happen and think that it disturbs you and your readers as well, then edit the code and fix this by the simple tutorial.

Go to Design > Edit HTML tab, and then click the "Expand Widget Templates" check-box.

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

And delete:
+ &quot;#more&quot;



The whole 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 in Blogger

If you have followed "How to Add "Read more" Option - Officially from Blogger" then it’s clear how to change the text. But if you still prefer to do it manually then just replace:
<data:post.jumpText/>
Example below:
<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 in Blogger.

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="your image URL"/></a>
</div>
</b:if >
Styling the Read More Link in Blogger with CSS Definitions and Properties

You can also add some styling codes in CSS properties, for example, copy paste the below codes before ]]></b:skin> and see how it will look:

.jump-link a {
padding: 4px;
background-color: #000; /* If you want to have a background color to the Read more link otherwise delete it */
color: #fff; /* Changing the Jump Break link color */
}
.jump-link a:hover {
padding: 5px;
background-color: #fff; /* Changing the background color on hover otherwise same as above. */
color: #000; /* Changing the Jump Break link color on hover */
}

Change the colors by changing the hex values. If you want to have the Read more link to right then change the floating side to right, "float: right;".