How to Add Keyboard Navigation in Blogger Blog

One of our user recently asked how we add keyboard navigation in our Blogger blog posts. Default Blogger template displays navigation link through the older and newer post link that usually appears at the very bottom of the Blogger achieve page.  However, we have seen many WordPress as well as HTML based sites that used Keyboard navigation  From our experience and knowledge, keyboard navigation is fast, reliable and convenient. Today in this article, we will show you how to add keyboard navigation in Blogger.

This method works with JavaScript, so it makes it a lot easier to apply and made it safely. However, it would stop working if someone would turn off JavaScript, so there are some drawbacks which you need to know before applying it to your blog or website. It works pretty well on Homepage, Archive pages and even post pages. All you need to do is to Press the Left and right Arrow buttons to navigate.

Note: If you want to navigate to the next page, you will press the “Right Arrow Key” and when you want to navigate to the previous page, you will press the “Left Arrow Key” located on your keyboard. 

Before you learn how it works, Let see the Demo Here

The First thing you need to do is to Login into your blogger dashboard. Now go to Your Blog >> Template >> Edit HTML and search for the ending </head> tag. After finding the tag, just above it paste the following JavaScript coding. Once everything is done press the “Save template” button located on the bottom to conclude.

<script type='text/javascript'>

window.onload = function()

{

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>

Congratulations: That’s all, now visit your blog and Press either “Left” or “Right” arrow keys to see how perfectly everything works. It is extremely responsive and works pretty well. 

Many users still believe that using JavaScript could cause slowness, but this is not what we should be thinking. If a script is correctly optimized, then there is no way it could affect your site speed. Here at MyBloggerLab, we use more than 20 JavaScript files, but the page speed is still 90+ out of 100.

We hope this tutorial has helped you to understand how to add Keyboard navigation in blogger. What navigation system are you using? Let us know what you think about this tutorial? Feel free to leave your suggestions in the comments below.