Older, Newer and Home Links are shown in blogger when we are viewing posts from homepage. Many bloggers want to customize them to use their own words or graphic images. Yes, you can customize or change older, newer and home links with image or text. All you need is to read this article carefully.
What Customization You can Do with Links?
- Change the text for Older, Newer and Home. (e.g Previous, Next and Homepage)
- You can also add icon with Text.
- You can also replace Older, Newer and Home with Images.
How to Change Older,Newer and Home Links with Image or Text in Blogger?
Step 1. Go to Template > Edit HTML.
Step 2. Find for 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> </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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Step 3. Now find the following codes in the searched code and change the values.
<data:newerPageTitle/> which shows Newer Posts link<data:olderPageTitle/> which shows Older Posts link<data:homeMsg/> which shows Home link
1. To Change with Text:
You have to replace in original code with any text you like:
- replace <data:newerPageTitle/> with, for example Next
- replace <data:olderPageTitle/> with, for example Previous
- replace <data:homeMsg/> (only the first one) with, for example Homepage
2.Add Icon or Image with Text:
Add the following code at the beginning of starting tag of bold text.
<img src="URL"/>
Change the URL with image or icon URL you want to show.
It should be like that after adding code.
<img src="URL"/><data:newerPageTitle/>
3. Change Older, Newer and Home Links with Image:
Replace the original tag with the following code.
<img src="URL"/>
Replace <data:newerPageTitle/> With the Image for Newer Posts
Replace <data:olderPageTitle/> With the image for Older Posts
Replace <data:homeMsg/> With the Image for Homepage