Customize Blogger "Read More" or Jump Break with Images or Text and style[with Alignment]

Read More link is facility for Blogger to Add into your Blog. Using it, you can shrink your Homepage's size. And also, the viewers are needed to read the article only if they are interested. This is good for both Readers and Admin. It increases page views also (and Earnings too $$$). Blogger has an in built option to add Read More link. But this is not much effective. So, here is the tutorial to customize the "read more" in blogger. If you have added "Read More" hack already instead of blogger default, no problem. You can tweak it too.
First, It is better to read my previous post on How to add Read More with Thumbnails in Blogger

First, Go to Blogger Dashboard > Design > Edit HTML

Now Backup the Template : This is an important step. If you had any mistake in your code, your entire template will be affected. So, always keep a Backup when editing something

Click Expand Widget Template on the right top

Now Search for

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

If you have already edited it, It may be looks like this

<a expr:href='data:post.url + "#more"'>Read More </a>

Sometimes
if you found it like the second one, please replace it with the first one

if it’s not in your template you’ll have to add it, for that read my tutorial How to add Read More with Thumbnails in Blogger

<data:post.body/>

Now, let's start customizing

1.To change the text "Read More" to any other or apply a style to it

This is very simple. just change the text marked red in the above code to your required one.
To change it's style, You can apply css or HTML on it if you know. If you are a newbie, do as follows. Replace Read More with any of the below

<b>Read More</b> to get bold text
<i> Read More </i> for Italics
<i><b> Read More</b></i> for bold italics

<font color=red size=5> Read More </font> to get text with red color and size 5 . You can change it to any other values

After changing it, click Save template and check out your blog.

2.Add An Image / Button Instead Of Plain Text

If you want to display an image/ button instead of text, do as follows

replace

<a expr:href='data:post.url + "#more"'>Read More </a>

with this code

<a expr:href='data:post.url + "#more"'><img border="0" src="IMAGELINK"/></a>

replace IMAGELINK with the URL of your Image

After changing it, click Save template and check out your blog.

And you can find more buttons by searching in Google for “read more button”.

3. Control the read more link or button alignment, left, right Or center.

lets back again for the first step, after applying the first step to your template,
you must have this code added to your template after applying first step.

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'>Read More</a>

</div>

</b:if >

this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.

<b:if cond='data:post.hasJumpLink'><div class='jump-link'>

<a expr:href='data:post.url + "#more"'><p align="xxxx">Read More</p></a></div></b:if >

and you can replace the xxxx with Left, right, or center.

any in this way you can control the position for your link or button.

and here is some examples to help you
Example 1

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a>

</div>

</b:if >

This will display read more in pain text aligned to left
Example 2

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="http://www.allblogtools.com/image-url.jpg"/></p></a>

</div>

</b:if >

This will display read more in image button aligned to right

i wish this can help you, you comments are welcome, and please share it if you found it useful