Replace Read More Buttons with an Image

Create a jump link within blog post makes things organized and well managed. It also makes your homepage load faster and above all your blog readers come to know about various posts at a time while they are actually browsing home page. But adding of a simple read more link makes your blog a dull looking one. If you replace that 'read more' link with an image, it looks better. So, in this tutorial i shall show you how to replace the default read more link with an image.
You may also like
✓ Add auto 'Read More' buttons in your blogger post.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.

Let's proceed.

❝ How to insert read more links within a post ? ❞

Its very easy to insert read more links within your blog post. If you are using 'HTML' to write your blog post, write down <!--more--> where you want to insert 'Read more' link. If you are using 'Compose' to write your blog post, click down 'Insert jump break' where you want to insert 'Read more' link. Moreover if you find that this is a boring job to insert read more link every time for every post, you may go for auto 'Read More' buttons.

❝ How to replace 'Read More' Buttons with an Image ? ❞

1. Go to 'Template' and click 'Edit HTML'.
   
2. Be sure that 'Expand Widget Templates' check-box is checked.
3. Search for (
   Ctrl
   +
   f
   )JumpLink. You will find a code like,

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

   or

   
    <a expr:href='data:post.url' expr:title='data:post.title'>
      <data:post.jumpText/>
    </a>
   

   That <data:post.jumpText/> is responsible for 'Read more' link.
4. Replace that <data:post.jumpText/> with the code below

   
   <img alt="Read More" width="120px" height="32px" src="---URL OF YOUR IMAGE---" />
   

   Make sure you actually replaced that ---URL OF YOUR IMAGE--- text with your image link. Also be sure that the dimensions (height and width) and size of your image are not too big. You can change the values of width and height attributes of img tag if you want to.

Any questions?? write that in comment section.
Happy blogging.