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


Tutorials - Tutorials

User Rating: / 0

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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

    <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>

    <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
    blogger tricks, older posts, newer posts

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

    About Us

    Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO Services Company in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


    - Contact Information - 

    Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
              23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

    Email : 


     : +91 8171200108, +91 8979462451,
                                      +91 7895753921

    Quick Enquiry Form

    Enter your full name

    Enter your valid email address

    Enter your correct mobile number

    Invalid Input

    Your Message
    Invalid Input

    Enter Code
    Enter Code
      RefreshInvalid Input


    You are here: Home Tutorials Replace Older, Newer And Home Blogger links with an image or text