Customise the “Newer & Older Posts” Pagination Links on Blogger

How to customise the newer and older posts link on Blogger

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 + &quot;_blog-pager-older-link&quot;' 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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>

Replace <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 + &quot;_blog-pager-older-link&quot;' 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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 + &quot;_blog-pager-newer-link&quot;' 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; }

or

#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 */ } 

The Newer Link

.blog-pager-newer-link { /* CSS HERE */ } 

The Older Link

.blog-pager-older-link { /* CSS HERE */ } 

The Home Link

.home-link { /* CSS HERE */ } 

Other tutorials

Backup your entire blog on Blogger or WordPress
Add a custom font to Blogger or WordPress
How to rearrange your post header and footer – labels, author, date

Elaine Malone avatar

34 responses to “Customise the “Newer & Older Posts” Pagination Links on Blogger”

  1. Valeria ♥ avatar

    OMG, THANK YOU so much! ive been looking for this everywhere and rarely i couldn’t find it.

    i Love your blog so much. ♥

    http://www.Misvaleriaheart.blogspot.com/

    1. Ellie M avatar

      Awh thank you so much 🙂 you’ve really cheered me up this evening x

  2. Sarah Griffin avatar
    Sarah Griffin

    Thanks for posting this! finally got it to work.. LOVE IT!

    1. Ellie M avatar

      Awh perfect 🙂 no problem, glad you found it useful x

  3. Marina avatar

    Today I’m making so many improvements to my blog thank’s to you! I was about to change many things but didn’t want to google each one, so I’ve been procrastinating for a while. But I found most of the tutorials at one place, and now you are my hero! Thank you so much.

    Marina

    http://www.marinagiller.com

    1. Ellie M avatar

      Awh thank you 🙂 so glad you are enjoying my site and finding it useful!

  4. roomobaby avatar

    You are amazing!! IT WORKS !! Thank you so much

    1. Ellie M avatar

      Awh thank you, fab blog!

  5. Eline avatar

    Thank you so much!

  6. Merissa avatar
    Merissa

    Such a fabulous tutorial! I tried and tried but for some reason I get this error message when trying to “replace links with image”:

    “Could not load template preview: Error parsing XML, line 1546, column 27: The element type “img” must be terminated by the matching end-tag “”.”

    Any idea what this means? Your help would be so awesome! Thank you for your time 🙂

    1. Ellie M avatar

      Make sure you’re pasting the direct image url between the quotes and not removing any other code.

  7. Sílvia Silva avatar

    Hi Ellie,

    I’ve tried to implement this on my blog, but my older/newer links are gone:(
    I’ve made other html changes before, and now I don’t know how to fix it. Do you know why this happens?
    my blog: http://www.silviasilva.com/

    thanks!!!!
    great blog!

    1. Ellie M avatar

      Hello, make sure there’s some kind of text or code in the area to be replaced. Otherwise nothing will show. Double check that section of code to make sure nothing else is missing 🙂

  8. Shannon avatar

    THANK YOU SO MUCH!! I was trying forever to figure out how to do it and if it weren’t for your post I would never have figured it out. Thanks so much.

  9. Yassine avatar

    i Love your blog so much. ♥

  10. BubbleGag avatar

    Hello, this is exactly what im looking for, Thank you so much for creating this kind of tutorial. Keep up the good job!

    I will apply this in my blog @ http://www.bubblegag.com/

  11. Rosa avatar

    Thank you so much! It worked, as usual. Your blog is gorgeous, I’ve really learned tons of things that have made my blog look more like me 🙂

  12. Charlotte B. avatar

    Thanks so much! Your blog is such an awesome resource for clear, practical blogging tips!

    xo,
    -Charlotte
    boyerfamilysingers.blogspot.com

    1. Ellie M avatar

      Thank you so much Charlotte!

  13. salman avatar

    thanks for help

  14. Lydia avatar

    Hi Ellie, just want to say how wonderfully informative your blog is!

    I wanted to change the font color and size of the older/newer post links, and also remove the underline.

    I inserted this css code:

    .blog-pager a {
    color: #000000;
    font-size: 150%;
    text-decoration: none;
    }

    But nothing happened.

    Any tips? Thanks in advance!

    1. Elaine Malone avatar

      Hello, there’s an error in your CSS which would stop other CSS below it from working. Find ]]> </b:skin> and above it you’ll see . Replace the square bracket with a closing curly bracket.

      1. Lydia avatar
        Lydia

        Thank you so much! 🙂

  15. SAZS SHOP avatar

    THANK YOU! YOU ARE A MOOD SAVER ^_^

  16. Sirosh Nasir avatar

    Your blog always help me to solve blogger related problems. Thanks

  17. Robert Vogt avatar
    Robert Vogt

    When you refer to the “pink” text in the html regarding “CHANGE THE TEXT OF THE LINKS” are you referring to what is actually the orange text or the red text? I’m having a little trouble changing the text.

    BTW, I’ve found this site extremely helpful in customizing my blog.

    Thanks!

    1. Elaine Malone avatar

      Hey Robert! Sorry, the pink reference text should have been removed when we updated our site design. I have updated this post now to explain which text to change. Thank you so much, so glad to hear that!

  18. Jaymie avatar
    Jaymie

    Hi. How do I change the text color of the older posts, home, and newer posts to white? Been fiddling with the css, but cant get anything to work. Please help? Thank you.

    1. Elaine Malone avatar

      Hey Jaymie, to change the text colour to white use #blog-pager a {color:#ffffff;}, if you have a custom template the selector may be different but I don’t have your URL to check for you.

  19. Merih avatar
    Merih

    Hello,

    This is very useful, thanks.

    Is there any way to add “number of pages” like 2,3,4..etc between the Older and Newer posts, by adding some codes inside this same section ? Because I do NOT want to use external widget which comes as package but they are not reliable.

    1. Elaine Malone avatar

      Hi Merih. Not really, you need to add JS to achieve this which needs to be hosted externally (as Blogger is a hosted platform and doesn’t allow access to site files). I’ve just published a post here for you about how to do so 🙂

  20. Beatriz Pedrosa avatar

    This was so helpful! Thank you so much for publishing it 🙂

    Beatriz ❤

  21. maricor avatar

    It was really helpful. Thanks a lot!