Styles with Newer, Older and Home Navigation Link

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. But need not to worry because this tutorial will show you different ways of changing the appearance of Newer i.e. Next, Older i.e. Previous (or Prev) and Home Navigation Links. This is very simple but useful trick for blogger blog. So let's do this.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.

After reading this tutorial you can

• Modify the default texts with your own texts.
• Modify the styles associated with these links.
• Switch the default positions of these texts.
• Replace the texts with images.
• Replace the title (appears on Mouse-hover) with your own texts.
• Remove these navigation texts from your blogger blog.

Now let's proceed.

1. Sign in to Blogger.
2. Click the Drop-down arrow adjacent to 'Go to post list' icon.
   
3. Click 'Template' from Drop-down menu list.
4. Click 'Edit HTML'.
   
5. Make sure that 'Expand Widget Templates' is checked.
6. Now look for (
   Ctrl
   +
   F
   ) following codes
   1. For Older Posts Link, search for <data:olderPageTitle/>
   2. For Newer Posts Link, search for <data:newerPageTitle/>
   3. For Home Link, search for <data:homeMsg/>

as a whole, these three codes with their adjacent codes will look like this

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

Now let's starts with different styles.

1. Modify the default texts with your own texts.

To change the default navigation text with your own test just replace the <data:....> with your own text. Say for example you want to insert 'Read My Next Post' in the place of 'Newer Navigation link'. In that case just replace <data:newerPageTitle/> with 'Read My Next Post' and code will look like this

<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">Read My Next Post</a>
  </span>
</b:if>

Convert special characters (like <, >, /, ") to escaped characters (like &lt;, &gt;, &#47;, &quot;).

2. Modify the styles associated with these links.

To modify the styles associated with home, previous and next post links, search for #blog-pager. You will find a code like this

#blog-pager {
  font-size: 140%;
}

Now enter your styles within that two brackets. If you don't find a code like that search for </b:skin and paste this before </b:skin

#blog-pager {
  // your style goes here..
}

Don't forget to write your styles within that two brackets. Save your template.That all.

3. Switch the default positions of texts.

There are two methods of doing this.

Method 1 :

This method is very very simple though it is not recommended as this method changes the concept of newer posts and older post. If you have large number of posts in your blog and if it doesn't matter to you that which post comes next or which post comes previous, you can apply this method. But keep in mind that this method is not at all recommended. In this method just cut <data:newerPageTitle/> and paste this in the place of <data:olderPageTitle/>. Now cut <data:olderPageTitle/> and paste this in the place of <data:newerPageTitle/>. As i told you guys this method changes the concept of newer posts and older posts.

Method 2 :

If what posts comes next and what comes previous really matter to you, then apply this method. in this method search for </b:skin and paste this before </b:skin.

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

Save your template.
See live demos of the styles described so far.

4. Replace the texts with images.

To replace the default texts with images, replace <data:newerPageTitle/> (discussed earlier) with <img src="..url of your image.." />. Do the same for <data:olderPageTitle/> and <data:homeMsg/>. When you are done, these will look like

<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">
     <img src="..url of your image that defines newer post.." />
    </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">
     <img src="..url of your image that defines older post.." />
    </a>
  </span>
</b:if>

<a class="home-link" expr:href="data:blog.homepageUrl">
 <img src="..url of your image that defines home page.." />
</a>

Save your template.

5. Replace the title(appears on Mouse-hover) with your own texts.

Carefully look the <b:includable id='nextprev'> tag. You will find two expr:title= attribute within that tag, one is associated with <data:newerPageTitle/> (which is expr:title='data:newerPageTitle') and another is associated with <data:olderPageTitle/> (which is expr:title='data:olderPageTitle') if is considered that you haven't changed anything associated with Blogger navigation link in Blogger template. Now change this expr:title= attribute and it's value to title="/* Your words that you want to insert*/". Now go to the parents tag of <data:homeMsg> which is an anchor tag and it looks like <a class='home-link' expr:href='data:blog.homepageUrl'>. Insert title attribute and its value within the anchor tag. when it is completed, it will look like this,

<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"" title="Go to Newer post"><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"" title="Go to Older Post"><data:olderPageTitle/></a>
  </span>
</b:if>

<a class="home-link" expr:href="data:blog.homepageUrl" title="Go to Home Page"><data:homeMsg/></a>

Now save your template.
See live demos of 4th and 5th styles.

6. Remove these navigation texts from blog.

Search for #blog-pager and paste display:none; within #blog-pager id. If you didn't find that #blog-pager id, search for </b:skin and paste this before </b:skin.

#blog-pager {
  display: none;
}

Save your template.
See live demo of this style.

If you have anything problem associated with this post, then let me know about this.
Happy Blogging.