How to Add Keyboard Navigation in Your Blogger Blog

Hello every one to day I would like you to know about KEYBOARD NAVIGATION. 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>