Replace an image instead of Newer posts, Older posts and Home text link

Today we will discuss how to replace an image instead of older posts and newer posts links. This hack is about replacing an image with the hyperlink instead of just the text link alone.

How to replace an image instead of Newer Posts, Older posts and Home

before you implement this hack make sure that you have created the necessary image for each links (Newer Post, Older Post and Home) and have uploaded in a web host. Now let us see how we can replace an image instead of Newer Posts, Older posts and Home link.

1.  Login to your Blogger Account

2.  Click on Layout

3.  Click on Edit HTML

4.  Tick on Expand widget

5.  And now search for this piece of code

<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Now replace the image with code that is market with red

<data:newerPageTitle/> : <img alt='Newer Posts' src='http://NewerPostImageURL'/>
<data:olderPageTitle/> : <img alt='Older Posts' src='http://OlderPostImageURL'/>
<data:homeMsg/> : <img alt='Home' src='http://HomeImageURL'/>

6.  Remember to change the NewerPostImageURL with the image source of Newer post image URL, OlderPostImageURL with the image source of Older post image URL and HomeImageURL with the Home image URL that you have uploaded.

7.  Now save your template and youd done.