How to Add - Continue Reading button to Blogger posts?

Continue Read/ Read more is a feature that has provided to display part of the post content and upon clicking "Read more" or "Continue Reading" link will display the complete post content.

We can replace the link with a button by using an image for the link.
Let us see the process of adding such button for "Continue Reading" or "Read more"functionality on blogger.


1. Create or download an image to be used for the button.

2. Upload the image to any of the blog that we use for database for our blog and get the image link location.

3. Now Go to : Dashboard -> Template -> Edit HTML

4. Find the below code in blog template HTML code (use Ctrl+F to find the word)

class='jump-link'

NOTE: If the above code is not found, then search for the string "Read more" or "Continue Reading"



5. Replace the data area with the below code

<div style='text-align: right;'>
<img width="120px" height="32px" src="URL Of Your Read More Button Image"/>
</div>

Example:
<div style='text-align: right;'><img width="120px" height="32px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdVjaYSBkv8I3u-xV9WvxVxbp7leWt6PvU9Uyh4_vsISKmjvUr2GN1t-16Zz2ThQf0JGNOXxckRNjqYdGMatRR6EmcQ0rbuuKXUEoJJrPAlN1O8idPkpOFroFzUuPP4fNldjhAIDQdZYQ/s1600/pink.png"/></div> 

NOTE: Replace the string "Read more" or "Continue Reading" in case we have any one of these strings.




6. Save Template and view the blog to see the changes.

Now we are familiar with the process of adding continue Reading" image to the blog posts.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.