Replace Older, Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.


What we can do:

A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links

So let's start customizing them...

1. Log in to your Blogger Dashboard, go to Template > Edit HTML

2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:
    <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>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Or find in this code the following fragments which corresponds to each page links
  • <data:newerPageTitle/> represents Newer Posts link
  • <data:olderPageTitle/> represents Older Posts link
  • <data:homeMsg/> represents Home link

Now change these fragments of codes as it follows:

A. Change the text of Newer Posts, Older Posts and Home Links


You need to REPLACE following parts in original code with ANY TEXT you like:
  • replace <data:newerPageTitle/> with, for example NEXT POST 
  • replace <data:olderPageTitle/> with, for example PREVIOUS POST
  • replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE

    B. Place a picture beside Newer Posts, Older Posts and Home links


    Add the below code just at the beginning of each of the colored fragments of codes from step 2.
    <img src="URL Address"/>

    So it should look like this:
    <img src="URL Address"/><data:newerPageTitle/>
    Note: Replace URL Address text with the url address of the image you want to appear

    C. Replace Older Posts, Newer Posts and Home links with an image/picture


    You can place any kind of picture you want All you have to do is use this code for the pic:
    <img src="URL ADDRESS"/>
    ...just replace URL ADDRESS, with the URL of your hosted picture
    ...and in code, REPLACE the original link code for text with picture code
    • replace <data:newerPageTitle/> with the pic for newer (next) posts
    • replace <data:olderPageTitle/> with the pic for older (previous) posts
    • replace <data:homeMsg/> (only the first one) with the pic for homepage
    Screenshot
    blogger tricks, older posts, newer posts

    3. That's it! Preview and Save the Template.

    28 comments:

    1. what if i want to place images at the top of the post ? becuase it shows at the end of the post ?

      Please reply asap i really need it ... my blog http://nannu4u.blogspot.in/

      ReplyDelete
      Replies
      1. You should have to use
        tag just after the NEXT PAGE and then img tag after
        .

        NEXT PAGE => Break Tag > IMG Tag

        See as I have done for my http://www.downloadCinemas.com

        Delete
    2. Is this show up on search by label?

      ReplyDelete
    3. thx i was searching for this...would implement this on my blog soon.

      ReplyDelete
    4. sorry i don't get it. please explain it thoroughly. I want this tutorial.

      ReplyDelete
      Replies
      1. Ok, I've updated my post and added some screenshots. I hope it will help:)
        Thanks for the visit!

        Delete
    5. Awesome tutorial. Thank you!

      ReplyDelete
    6. Is there a way to switch the positions of the links so that "Older" shows up on the Left and "Newer" shows up on the right? I'd rather switch the actual links than just change the names.

      ReplyDelete
    7. Hiya thanks for that it worked a treat however the images are huge how do I alter the code to include thumbnail images and not full size ones ??

      ReplyDelete
    8. Thanks for sharing such a informative article.

      ReplyDelete
    9. i think this tutorial so helpfull. i am finish my work now...

      ReplyDelete
    10. When I control F the only thing is close to data:newerPageTitle/ is title<data:blog.pageTitle//title
      . It seems my template never has what I am supposed to be looking for. It is expanded and I used Control F. Thanks.

      ReplyDelete
    11. Is there a way to get rid of the "Newer/Home/Older Posts" links altogether? I just want the lower navigation off my site entirely...

      ReplyDelete
      Replies
      1. Hi there,

        Add this piece of code just above ]]></b:skin>

        #blog-pager {display: none;}

        I hope this will work for you. Thanks for visiting!

        Delete
    12. I can't find the html for this anywhere. I had a template designed by someone else on my blog, and I have got rid of it, but I can't change the images she used for the newer, older and home buttons. Can you help me find the code?
      the Earth through a Lens

      ReplyDelete
      Replies
      1. Hi Emma,

        Please search the following codes in the template's html:
        <img src='http://i1306.photobucket.com/albums/s564/GraceGendera/older_zps060c796d.png'/>

        This one above is the image for the "Older" links and the image for home link is this one:
        <img src='http://i1306.photobucket.com/albums/s564/GraceGendera/home_zps514b047f.png'/>

        And for "Newer" link:
        <img src="http://i1306.photobucket.com/albums/s564/GraceGendera/newer_zpsf35038db.png">

        Just replace them with your own images or text.
        Thanks for visiting!

        Delete
    13. I have the same problem. I can't find this link anywhere..

      ReplyDelete
      Replies
      1. Code for older posts link:
        <img border='0' src='http://4.bp.blogspot.com/-J-vtfNeJayI/U9KxXYIFW7I/AAAAAAAAKBE/nMDbLOaIw48/s1600/MAIN+BODY-22.png'/>
        And for the new posts link:
        <img border='0' src='http://2.bp.blogspot.com/-p-Oux0pwSx8/U9KxXCkkmOI/AAAAAAAAKBQ/u7VsIHThwSg/s1600/MAIN+BODY-23.png'/>
        Please see the above reply for more info ;)

        Delete
    14. I am not sure how
      a) to show the title of the earlier/later post in this
      b) How to move this to the top of the Page.

      Help?
      Thanks ;)

      ReplyDelete
      Replies
      1. Hi Oliver,

        a) To show the title of the newer/older posts, please add the script from here
        b) Add in the same HTML/JavaScript box where you pasted the script, this code:
        <style>
        #blog-pager {position: absolute; top: -40px; width: 100%; height: auto; display: block;}
        </style>

        Change the -40px from top if the navigation doesn't show properly. Hope it works!

        Delete
    15. Hi, is there a way to hide newer/older posts in posts pages? Ty

      ReplyDelete
      Replies
      1. Hi Nuno,

        Add this code just above the </head> tag of your template:
        <b:if cond='data:blog.pageType == "item"'>
        <style>
        #blog-pager {
        display: none !important;
        }
        </style>
        </b:if>

        Hope it works ;)

        Delete