Blogger Tips; How to replace Older, Newer and Home links with your own text or image?


Blogger displays Newer Posts, Older Posts and Home links at the bottom of your blog posts page (not static pages) to navigate across your posts.

If you would like to customize those links, you can do so.

What you can do:
  • replace the default text by Blogger with your own
  • add images instead of text links
To customize the Blogger links -
  • Log in to Blogger dashboard
  • Go to Template > Edit HTML
Blogger Template > Edit HTML

  • Click anywhere inside and press CTRL+F on your keyboard
  • In the search box, type <data:newerPageTitle/> and <data:olderPageTitle/>
Find 
  • Repalce <data:newerPageTitle/> and <data:olderPageTitle/> with any other text
  • Save the Template
  • View the update page
Example:
In this example, I have replaced -
<data:newerPageTitle/> with "&lt;&lt; Next" where "&lt;" is the code for "<"
and 
<data:olderPageTitle/> with "Previous &gt;&gt;" where "&gt;" is the code for ">".

Before:
After:


Replace text links with images

  • If you would like to add an image along with the text, add img source
    • Example: <img src="URL Address"/><data:newerPageTitle/>
    • You can place the img source tag before of after, depending on your image placement required.
  • If your would like to replace the text with only the image, add only ing source tag and remove
    • Example: <img src="URL Address"/>
That is all. Play around with it till you like what you see.

No comments