Change “Read More” link into a button

When you use the Read More links on your blogger blog, it just adds a tiny text link to the bottom of your posts that can be pretty easy for readers to miss.  And it’s not very pretty either.  By default, the Blogger read more link will look like this:

Not very noticeable.  Click on the video below to watch how easy it is to turn that sad little link into a button.  Instructions are typed up below too.

How to change the plain link to a read more button in Blogger:

1. In  your Blogger dashboard, click on “Theme.”  In the top right, click “Backup/Restore” and download a backup of your theme.
2. Click “Edit HTML” then click anywhere in the code.
3. Push CTRL and F (or CMD F) and a search box will pop up in the top right.  In the search box, type jump-link.
   You will see this code:
   <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>
Don’t be scared.
4. That section in the middle that begins and ends with a is your actual Read More link.  All we are going to put the word button before and after it.
   At the beginning, put: <button>
   And at the end, put: </button>
   So, when you’re done, it should look like this:
   <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<button><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></button>
</div>
</b:if>
5. Save your work, and go check out your new Read More buttons!