Stylize Older, Newer and Home Navigation Links

Visitors like that blog which are well decorated because it helps them to navigate easily throughout the blog. All professional bloggers always try something new to decorate their blog in a unique way. Blogger navigation links are also part of that decoration. Although by default blogger provides some styles for these links but those are so dull and boring. This tutorial will show you different ways of changing the appearance of newer (or next), older (or previous) and home navigation links. This is very simple but useful trick for blogger blog.

Before you make any changes, it is recommended to backup your blog template if anything goes wrong.

• Modify those texts with your own.
• Replace those texts with images.
• Switch the positions of those texts.
• Remove those texts from blog.

Let's proceed.

1. Sign in to 'Blogger' dashboard.
2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' form the drop-down menu list.
3. Click 'Edit HTML'.
4. Search for (Ctrl+F) data:newerPageUrl. You'll find a code similar to the following.

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

5. In that code, <data:olderPageTitle/> is responsible for older posts link, <data:newerPageTitle/> for newer posts link and <data:homeMsg/> for home link. Stylize those texts as follows.
Modify those texts with your own

Replace those texts with your own texts. For e.g. if you want to insert 'Read My Next Post' as newer navigation link, replace <data:newerPageTitle/> with 'Read My Next Post'.

Convert special-characters (e.g. <) to escaped-characters (e.g. <).


Replace those texts with images

Replace <data:newerPageTitle/> with <img src="url of image for newer link" />.
Replace <data:olderPageTitle/> with <img src="url of your image for older link" />.
Replace <data:homeMsg/> with <img src="url of your image for home link" />.



Switch the positions of those texts

Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) this before </b:skin>.

#blog-pager-older-link {
  float: left;
}
#blog-pager-newer-link {
  float: right;
}



Remove those texts from blog

Search for (Ctrl+F) #blog-pager and paste (Ctrl+V) display:none; within #blog-pager. If you didn't find that, search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following before </b:skin>.

#blog-pager {
  display: none;
}

6. Click 'Save template'.

If you face any problem with this post, let me know.
Happy Blogging.