Add Keyboard (Arrow Keys) Navigation To Your Blogger Blog

After you implement this really easy tutorial, your visitors will be able to navigate/browse through your blog using the left ← and right → arrow keys on their keyboards!

Your visitors don't have to take the trouble of finding the older and newer posts links any more! This small and really light-weight script will take effect on your blog's homepage and all the post pages.

How does it work?

It works exactly as the "Older Posts" and "Newer Posts" links on your blog.

• When on homepage, pressing the right arrow key will take the visitor to "Older Posts" and left arrow key to "Newer Posts".
• When on a post page, pressing the right arrow key will take the visitor to the "Previous Post" and left arrow key to the "Next Post".
• This feature won't work when a visitor is typing something into a text box on your blog. This was done to avoid the page from being changed when the user is typing something into a text box and uses the arrow keys to move around the text.

I have implemented the exact same script on this blog as well! Press the left ← and right → arrow keys and experiment with it as much as you want!

Steps to implement

1. Go to your blogger dashboard >> Template >> Edit HTML.

2. Press CTRL + F and search for the closing head tag:

 </head>

3. Paste the following code directly before/above </head>

 <script type='text/javascript'>
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script>

Code Credits: BW

4. Hit Save template and you're done!

Advantages of this tutorial

• This tutorial uses a very basic and light-weight JavaScript.
• This JavaScript code is not dependent on any external libraries hence it won't slow your page down.
• Your visitors don't have to take the trouble of scrolling down the entire page to find the older and newer post links and then click on them! They now have a much better alternative!

Tip: To let your visitors know that your blog has such an awesome functionality, add a little message on your blog saying "Use the left and right arrow keys on your keyboard to navigate through this blog!" or something like that.