How To Customize Read More Link In Blogger

Bloggers read more link in the homepage which lets users to read full post makes your blog look ugly therefore it needs to be customized to make it look beautiful. If you want your blog to be more attractive, beautiful and cool you must customize it. You may have noticed that in many blogs read more or continue reading option is either a button or an image and it is floating on right side of the post and in simple template or any other template designed by blogger there is only a link which looks rubbish.
So it needs a little customization. In this post I will tell you how can you change the text of this button, replacing it with an image or a Css button, so follow below steps to start customization:

How to add an image instead of read more link:

(1).  Go to Blogger Dashboard.

(2). Select Template and click edit template.

(3). Now find <div class='jump-link'> and below this line you will find <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> this is the part which needs customization.

(4). In the above piece of code <data:post.jumpText/> holds your text so if you want to have an image instead of text replace <data:post.jumpText/> with <img src='url to the image'/>

(5). Replace url to the image with link of the read more image.

Note: Make sure to not change anything in the code except url to the image otherwise it will not work and also be sure to paste a link which have a format in last e.g png, jpeg, gif etc as in the below image link the link terminates at png.

http://2.bp.blogspot.com/-9K60ETTu118/VA3fQDwePmI/AAAAAAAAAnU/0ypYXJci4xs/s760/101Helper%2Blogo.png

Final code should look like below code:

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

(6). Save the template and you are done.

How to add a css button instead of read more link:

Css means cascading style sheets, it lets you to create buttons of your own choices e.g its color, its font size, its font family, its background color, its color on mouse hover etc. Here I will share a css code which will customize your read more link and also align it on right side. You can also change active and hover color of your button, so follow below steps to replace read more button with a css button:

(1). Go to Blogger Dashboard.

(2). Go to Template and click customize.

(3). On the customization page click Advanced and scroll down to find Add css option, click it and paste the below code in it:

.jump-link { text-align: right;background: transparent;} 
.jump-link { position:relative; top: 8px; } 
.jump-link a { background: #444444; color: #eeeeee;padding: 5px;border-radius: 7px;} 
.jump-link a:hover { background: #dddddd;color: #000000;text-decoration: none;}

(4). Click Apply to blog on top-right of the customization page and you are done!

Customization:

• To customize button position from left to right replace text-align: left;.
• To customize vertical position increase or decrease number 8 in link 2 of the code.
• To customize button color change #444444, to change button text color change #eeeeee, to increase or decrease height of button change  5px and to chnage radius of the button change 7px in line 3 of the code. How to get code of a color?
• To customize hover color(hover by mouse) change #dddddd to your own choice and to change text hover color replace #000000.

How to change text of read more button:

To change text of the jump break from read more to your own text follow the below steps:

(1). Go to Blogger Dashboard.

(2). Go to layout and edit blog post and find post page link text in the opened window.

(3). Replace read more with your own text if you have still any problem then follow below image:

(4). Click Save and you are done.

Final words:

Thanks for visiting 101Helper, share this post with others, follow and subscribe to get news about latest blogging tips, tricks, tutorials, gadgets and widgets. If you like this post recommend it on Google by clicking g+1 below. If you have any problem related to this post then leave a comment below.

How to customize Read more link in blogger, read more button for blogger, read more image, 101Helper tutorials for bloggers.