Use next and previous post titles as navigation in Blogger

UPDATE [2013.05.01]: Simplified steps and updated code and sample. As a dear reader pointed out, the old post wasn't beginner friendly (and yes I confused myself as well).

By default, at the end of each Blogger post, we get the "Newer Post" and "Older Post" navigation links. As I have seen in other sites, it looks better if it showed the next and previous post titles instead. So in this tutorial, I will show you how to customize your post navigation links so that it will display the titles of your next and previous posts.

Replace "Newer Posts" and "Older Posts" with post titles.

Before we begin, backup your template first or maybe use a test blog instead. To backup your template, go to your blog's dashboard then Template » Backup/Restore » Download full template.

Step 1. Adding the script.

In this step, we will be adding a script to your template. To add the script, go to Layout then click on "Add a Gadget" and select HTML/JavaScript from the list.

In the Configure HTML/JavaScript window, leave the Title empty and paste the following code in the Content. I based this code on BloggerSentral's version by the way. I modified it so that we can customize the navigation titles a bit more.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?attredirects=0&amp;d=1"></script>

<script type="text/javascript">
$(document).ready(function(){ 

 var olderLink = $("a.blog-pager-older-link").attr("href");
 $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {
  $(".blog-pager-older-title").text($(this).text());
 });

 var newerLink = $("a.blog-pager-newer-link").attr("href");
 $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {
  $(".blog-pager-newer-title").text($(this).text());
 });

});
</script>

Click Save once you're done.

Paste the code into an HTML/Javascript gadget.

Step 2. Modifying the template.

Next is to update the template code.

Go to Template » Edit HTML and search for the line <data:newerPageTitle/> and replace it with the following code:

<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>

Do another search and look for the line <data:olderPageTitle/> and replace it with the following code:

<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>

TIP: In Blogger's (new) HTML Editor, you can search for a line of code by clicking anywhere inside the text area. Press Ctrl+F then type in your search word in the search box that appears in the upper right corner.

After replacing the lines of code, your template code should be something like this:

Replace <data:newerPageTitle/> and <data:olderPageTitle/> with the new code.

And we're done with the basic setup! Save your template and check your blog whether all is running ok.

With this basic setup, the post title navigation will work on all pages of your blog -- homepage, search results, archive list... Normally, with these type of pages, your navigation should be "Newer Posts" or "Older Posts". So in the next step, we will setup the post title navigation to work only in Item pages (i.e. the post's page itself). But if you still prefer to leave your post title navigation as is, you can just skip Step 3.

Step 3. Using the post title navigation on Item pages only.

Back to the template editor (Template » Edit HTML), search for the code we added earlier for the newer post title link:

<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>

And replace it with the following:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span class="label">&amp;laquo;</span>
  <span class="blog-pager-newer-title"></span>
<b:else/>
  <data:newerPageTitle/>  
</b:if>

Do the same for the code of the older post title link:

<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>

And replace it with:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span class="blog-pager-older-title"></span>
  <span class="label">&amp;raquo;</span>
<b:else/>
  <data:olderPageTitle/>  
</b:if>

So now your template code will be something like this:

Update the code so that the post title navigation displays in Item pages only.

Step 4. Using your own navigation labels.

Now if you want to use your own labels instead of the "«" and "»" provided in the code we added earlier, just change the text between the <span class="label"> and </span> tags to whatever you want.

IMPORTANT: When putting in your navigation labels, note that there are special characters such as "<",">","&","'" (and others) that will generate an error in your template if you input them as is. As you may have noticed in the code given earlier, a simple "<" should be written as <. Don't worry though if you are not familiar with this. BloggerSentral has this tool to convert the special characters automatically for you but after the conversion, don't forget to replace all & with & (e.g. &lt; should be written as &amp;lt;).

Some samples:

Use your own text for the navigation labels.

And if you followed Step 3, you might also want to customize the labels on the non-Item pages as well.

If you prefer not to use the default "Newer posts" label, search for <data:newerPageTitle/> in your template code and replace it with whatever text your want.

Do the same for the "Older posts" label. Search for <data:olderPageTitle/> and replace it with your own text.

Customize the navigation labels for non-Item pages.

Extra notes (in case you want to dive into the technical stuff)

• <span class="label">
  • This is the label for the post title links (e.g. Next/Previous, Older/Newer Posts, «/»).
  • This serves as a fallback. In case the jQuery script doesn't run, you will still see a "« Next" label rather than just an empty line.
  • Any tag can be used in place of span.
  • Any class name can be used in place of "label".
• <span class="blog-pager-newer-title">
  • This will contain the post title.
  • Its class name can't be changed without also changing the jQuery script.
  • Any content placed inside this tag will be replaced with the post title unless the script is modified to append the contents.

And that's it. If there's anything I missed or messed up, feel free to let me know in the comments!