Page Navigation With Arrow Keys In Blogger

Navigating between pages using the keyboard arrow keys is a very useful feature. It saves time scrolling down the page to find links to the next page in a site and is very intuitive for visitors.

In this tutorial, I offer a very simple Blogger template hack which can be used to navigate between newer and older posts on any page where the "blog pager" is present (including index, search, archive and item pages) using the left and right arrow keys.

Try out this functionality on my latest Blogger template release and read on for details of how to add this function to your own Blogger-based site.

There are two main steps to add arrow key navigation to our Blogger template:

1. Edit the "Blog-Pager" element in the template HTML
2. Add a simple script just before the closing </body> tag

Once we've added the relevant code, you'l be able to navigate to older posts and pages using the right arrow key, or to newer pages using the left arrow key.

Add the required code to your Blogger template

First we need to edit the "newer" and "older" links in the Blog-pager element of our Blogger template. 

Go to Template>Edit HTML in your Blogger dashboard and ensure you have checked the Expand widget templates box near the top of the page.

Using your browser's search function, locate the following section of code:

  <div class='blog-pager' id='blog-pager'>
    <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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

Edit the text highlighted in bold red so they appear like this instead:

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='newer'><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:title='data:olderPageTitle' id='older'><data:olderPageTitle/></a>
      </span>
    </b:if>

The easiest way is to replace the code in your template with the replacement code above.

Next, locate the closing </body> tag in your template. Immediately before, paste the following section of code:

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode)
{
case 37:
window.location.href = document.getElementById(&#39;newer&#39;).href;
break;
case 39:
window.location.href = document.getElementById(&#39;older&#39;).href;
break;
}
};
};
</script>

At this point, it's advisable to preview your template. If you've made any errors when editing your code, this will be apparent in the preview. You can also test the new functionality by pressing the right arrow key while on the preview page.

If all is good, proceed to save your template and enjoy the keyboard shortcuts for navigating through your site.

You may want to let visitors know that they can navigate to newer/older posts using the arrow key as this is not a default feature of Blogger. For example, you could add a widget in your layout explaining the arrow key navigation.

What do you think?

I hope this quick tutorial was useful in helping you enable simple keyboard navigation between posts on your site. Please feel free to leave your thoughts and comments below.

Image credit: Woo Themes