How to Edit Home, Older Posts and Newer Posts Links in Blogger

As a Blogger user, you may have seen Older Posts, Home and Newer Posts links at the bottom of your homepage. They help your readers to navigate through your posts and to go back to homepage if they need. Technically this whole element is known as Blog Pager and links called as navigation links. Without a clue you know where those links are heading to by their text labels. But except for default link view, you might wanna give more color to your navigation links by changing text or replacing relevant icons or images. But do you know how to edit its text or replace it by a relevant image as you prefer?

May be you are like the way it is with default labels and text links it has. But you may wonder how to change it too. Wouldn't it better if you can change label with more descriptive text or relevant and eye catching icon or image? Yeah, your readers will love it and they can easily find your navigation links too. Absolutely, it will add more color to your blog. You can easily edit them as you need and else if you gonna add custom navigation pane, you may need to remove current blog pager first. Here you can find how to respond in either of scenarios without being confused. Shall we?

Steps:

1. Navigate to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Now select a topic below as per your requirement.

Hide Home, Older Posts and Newer Posts Links

Here we are gonna edit CSS style corresponding to Blog Pager.

i. Find CSS style named .blog-pager in your template.

ii. Add display:none; style attribute into CSS style as below.

.blog-pager {
  background: $(paging.background);
  display: none;
}

Change Home, Older Posts and Newer Posts Links

All you have to do is finding layout data tags corresponding to each link and replacing them with whatever you wanna display instead of current link text.

i. Find the layout data tag corresponding to each link in your template.

Home - <data:homeMsg/>

Older Posts - <data:olderPageTitle/>

Newer Posts - <data:newerPageTitle/>

ii. Now replace the layout data tag with the text or image you wanted to appear.

Note: You may wonder by having two results for each layout data tag. Just select the first resulting tag when you gonna modify.

i.e: If you need to change Older Posts link with text or image, just find corresponding layout tag, which is <data:olderPageTitle/> in your template.

... expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

Then replace it with your text

... expr:title='data:olderPageTitle'>[Your Text]</a>

Or else with your image

... expr:title='data:olderPageTitle'><img src='[Your Image URL]' title='[Title of Your Image]'/></a>

Color Indication Information

   - The text you wanna replace with

   - The URL of the image you gonna use to appear instead of existing link

   - Add title for the image if you prefer and it will be displayed whenever an user points their mouse over your image


6. After changing or hiding Home, Older Posts and Newer Posts links, Preview your blog and click on Save template button.

Enjoy :-)