Change Older Post Text Links Or Replace With Pictures

If you wish to change the text from Older Posts or Newer Posts to some other words, or to have them replaced by pictures. First, you can download free cool icons Here or you can use your own icons that we will use to replace the text links.

1. Change the text links with other text

If you want to change the words, for example, Older Posts to Past, Home to Present, and Newer Posts to Future, under Template -> Edit HTML, see that the Expand Widget Templates box is checked. Scroll to these lines:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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 + "_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>

</div>

Change the colored portions of the code to this:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Future</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'>Past</a>
</span>
</b:if>

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

</div>

After This You Can Just Save Template and See The Result

You can of course replace these with other words. For example, you may substitute the Older Posts (in red) with other words like Previous Rants, Yesterday's words, Lost Files. Choose your own words for Home (in green) and Newer Posts (in blue).

2. Replace with picture links

You can also replace these texts with icons, cliparts, or other images and pictures. Many people use arrows to point to the previous page or next page. You should first have the pictures that you want to use.

In the above codes, instead of replacing the red, green and blue portions with text, insert this code instead. Remember to type in the Image URL:

<img src="Image URL" />

You can change your template to the following:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="http://www.blogpulp.com/imagehost/images/733257041.jpg" /></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'><img src="http://www.blogpulp.com/imagehost/images/180881814.jpg" /></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com/imagehost/images/139275805.jpg" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com/imagehost/images/139275805.jpg" /></a>
</b:if>
</b:if>

</div>

3. Switch Position of Older and Newer Posts

You would have noticed that the Older Posts link is on the right whereas the Newer Posts link is on the left. If we are using arrows to depict the Previous article and the Next article, we may prefer to have the Previous article or Older Posts on the left instead of the right. To switch the positions, we go to these lines in the template and amend the parts (shown in red).

#blog-pager-newer-link {
float: right;
}

#blog-pager-older-link {
float: left;
}

With this change, we now have the Older Posts link on the left and the Newer Posts link on the right.