How to Customise "Read more" Link in Blogger

The "Read more" feature in blogger help us to condense our posts on our homepage. It makes the homepage to load faster and keep things well-organised and well-managed. Thus it ultimately increases the click-throughs of posts and also enhances the user-experience. Most of the blogs possess this feature but the default blogger text gets blended with the posts. It is very important to make the link stand out, so that readers exactly know that where they are supposed to click to continue reading the remainder of a post. 

This link is easy to customise. You can change the “Read More” text to something of your own choice, add an image instead of text, and totally stylize the look of the “Read More” text link.

Here is what you exactly need to do in order to customise and add the read more link on your blogger posts.

Customising Read More Link

1. In your blogger dashboard, go to 'Template' section and click on 'Edit HTML' . (We know you won't make mistakes but still don't forget to backup your template before editing HTML).

2. Click anywhere in between the HTML code and press CTRL+F (or CMD+F on Mac) to open the Search box in the top right corner. Using the search box, search for the code given below.

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

<data:post.jumpText/></a>
</div>

3. To change "read more" text make changes to the code as shown below:

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

<data:post.jumpText/>

</a>
</div>

Edit the text in red in code shown above with your link text, such as:

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

Continue Reading...

</a>
</div>

To Use An Image Instead Of Text

If you want your reader to click on an image instead of text to read the remaining post, you need to replace the code shown in step1 with the code given below.

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

<img src="Link of your image goes inside the quotes">

</a>

</div>

The URL of the image has to be your image URL. You can use Photobucket to host an image for you and you can then use the image link here.

Customising The Text Of "Read More" Link

---

Now, to add style to the text link, you will have to add CSS to the .jump-link element. 

Again click anywhere in between the HTML code and press CTRL+F (or CMD+F on Mac) to open the Search box in the top right corner. Using the search box, search for the code given below.

]]></b:skin>

Now just above the code you found, paste you CSS code. CSS will look like this.

.jump-link {
text-align:center;
}

.jump-link a {
font-size:15px;
padding:10px;
font-weight: 900;
font-style: normal;
color: rgb(16, 32, 232);
font-size: 15px;
border: 2px double rgb(55, 151, 178);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-style: double;

border-style: outset;
border-top-left-radius: 23px;
border-top-right-radius: 23px;
border-bottom-right-radius: 23px;
border-bottom-left-radius: 23px;
height: 31px;
width: 175px;
background-image: linear-gradient(rgb(214, 205, 205), rgb(225, 144, 144));
background-position: initial initial;
background-repeat: initial initial;
background-color: rgb(135, 116, 116);
font-weight:bold;
}

The CSS code given above will make your read more link to appear like this:

You can modify the CSS code and customise the "Read More" link as per your blog's layout. If you don't know how to write CSS code you can go to button garage to build-up your own CSS code.

Adding "Read More" Link In Blog Posts

Setting up of "Read more" link in Blog Post

Adding "Read More" link is as simple as clicking. Just place your cursor where you want to insert the link and click on the "Page Break" button in blogger text formatting toolbar.

Stay tuned with us for much more stuff that matter to you.

We love to hear from our readers. Don't be a stranger.

Comment and let us know what you think.