Today’s tutorial is about changing the links for “newer posts” and
“older posts” at the end of your blog under your post section on
Blogger. When a visitor clicks on the link for older/newer posts, it
takes them to the previous/next page of posts. The number of posts shown
on your home page will depend
on your settings. There are loads of ways
we can change the links, including:
- Change the text of “Newer Posts”, “Home” and “Older Posts”.
- Add images to the links
- Replace text with images
- Change position of links
Finding the code
Login to Blogger > Template > Edit HTML > Jump to Widget > Blog 1. Under this you will see<b:includable id='nextprev'> ... </b:includable>, click the black arrow on the left to expand this code. In between <b:includable id='nextprev'> and </b:includable> you’ll see the code you need to change.
Change the text of the links
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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: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>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a><data:olderPageTitle/>, <data:newerPageTitle/> and <data:homeMsg/>
to change the text shown for older posts, newer posts and home links.
You can change the text to whatever you want like “go back”, “go
forward” and “go home”.Add images to the text links
To place images beside the text links, add<img src="DIRECT IMAGE URL"/> after <data:olderPageTitle/> for older posts on the right and before <data:newerPageTitle/>
for newer posts on the left. If you are swapping the position of the
links (tutorial below) so that the link for newer posts appears on the
right and the link for older posts appears on the left, then add add <img src="DIRECT IMAGE URL"/> before <data:olderPageTitle/> and after <data:newerPageTitle/>.<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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/> <img src="DIRECT IMAGE URL"/>
</a>
</span>
</b:if>
<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="DIRECT IMAGE URL"/> <data:newerPageTitle/>
</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>Replace the links with images
If you don’t want any link to appear and only want to use an image, simply replace<data:olderPageTitle/>, <data:newerPageTitle/> and <data:homeMsg/> with <img src="DIRECT IMAGE URL"/>.<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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="DIRECT IMAGE URL"/>
</a>
</span>
</b:if>
<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="DIRECT IMAGE URL"/>
</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src="DIRECT IMAGE URL"/>
</a>Change the position of the links
To switch the positions of the links so that “Newer Posts” appears on the right and “Older Posts” appear on the left, add the following code above]]> </b:skin> in Template > Edit HTML.#blog-pager-newer-link { float: $endSide; }
#blog-pager-older-link { float: $startSide; }#blog-pager-newer-link { float: right; }
#blog-pager-older-link { float: left; }Customise the style
To change the look of the links including the colour, background, border etc find the following code before]]> </b:skin> in Template > Edit HTML and add your styling between the brackets.The Container
.blog-pager { /* CSS HERE */ } .blog-pager-newer-link { /* CSS HERE */ } .blog-pager-older-link { /* CSS HERE */ } .home-link { /* CSS HERE */ }