Replace 'Older post', 'Newer post' and 'Home' links text with anything of your choice

At the end of each page your can see 'Older post', 'Newer post' and 'Home' links. What we are talking about is this.

This can be changed to anything of your liking. For e.g.

Goto Layout > Edit HTML.
Check the 'Expand Widget Templates' checkbox.

Look for the following html code in your template.


<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId &quot;_blog-pager-newer-link&quot;' 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 &quot;_blog-pager-older-link&quot;' 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 all we need to do is to replace the code in red with our content.

We will modify <data:newerPageTitle/> to change "Newer Post", <data:olderPageTitle/> to change "Older Post" and <data:homeMsg/> to change "Home" links.
These can be replaced with text of our choice or an image.

For e.g. to use images instead of "Home" link. We will replace the code

<data:homeMsg/>
with

<img src="/path-to-image/" width='50px' height='50px'>

Where "path-to-image" is the path of image to be displayed.
The modified code will look like this


<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId &quot;_blog-pager-newer-link&quot;' 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 &quot;_blog-pager-older-link&quot;' 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'><img src="/path-to-image/" width='50px' height='50px'>
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


Similarly change <data:newerpagetitle> to modify "Newer Post" and <data:olderpagetitle> to modify "Older Post" links.

An example can be seen at the end of this blog.