Customising The Newer Post - Older Posts Captions

Not everybody who like Layouts templates, and their flexibility, likes the "Newer Posts" / "Older Posts" links. Some people are content to just remove them, but others would like to change the captions.

The latter task isn't terribly difficult. As always, backup your template before and after making these changes.

The simplest changes that you can make involve editing the CSS rules that control the fonts.

• You can change all 3 links together. The "Newer Posts" - "Home" - "Older Posts" container uses the Class rule "blog-pager".
• Alternately, you can change each link separately.
  • "Newer Posts" uses the Class rule "blog-pager-newer-link".
  • "Home" uses the Class rule "home-link".
  • "Older Posts" uses the Class rule "blog-pager-older-link".

Here is the CSS rule set for a Minima / Simple template.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

Make the "Home" link bold.

#home-link {
font-weight:bold;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

Make all three links bold.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
font-weight:bold;
text-align: center;
}

If you want to change the link captions, or maybe replace the captions with pictures, you'll have to edit the template XML. This is slightly more work than tweaking the CSS rules.

From the Template Editor, expand the post template, aka "Blog1". Look through the code for "nextprev". (Note): What you see below contains gratuitous line breaks, to prevent post / sidebar alignment problems.

<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>
<div class='clear'/>
</b:includable>

Change that. Here, we'll change "Newer Posts" to "Next", and "Older Posts" to "Prev".

<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'>
Next</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'>
Prev</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>
<div class='clear'/>
</b:includable>

Here, we'll change "Newer Posts" to a left arrow, and "Older Posts" to a right arrow.

<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://3.bp.blogspot.com/_pzC_7PLtN-0/
SLspRekw94I/AAAAAAAABO0/xBrN8YSo-Vc/s200/
Left.gif'/></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://4.bp.blogspot.com/_pzC_7PLtN-0/
SLspRqEA42I/AAAAAAAABO8/yuwkwz-8Tr4/s200/
Right.gif'/></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>
<div class='clear'/>
</b:includable>

Here, we'll change "Home" to "My Home Page".

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

And Save, which ever change you make. See it in action, if you like.

(Note): The "Newer Posts" / "Older Posts" links are only available in blogs with layouts templates, because they require XML. If your blog uses a classic template, this is an excellent opportunity for you to consider upgrading to a layouts template. If you insist on using HTML for the template, upgrade to layouts anyway - then use your HTML in the layouts body.

And please, backup the template - before and after making these changes.