Script For Keyboard Navigation In Blogger - Arrow Keys

Till now most of the bloggers are using those traditional older and newer links to navigate on their website. To visit the previous pages on a blog we simply click on older pages button and in similar way on newer pages button to check the new pages. But what if the website is very large? You'll keep on scrolling and looking for navigation links. One of the best solution for this problem is to use keyboard arrow keys as navigation in blogger. 

Keyboard Arrow Keys Navigation

This feature is called Keyboard arrow key navigation. It allows your blog visitors to navigate your blog using left arrow key and right arrow key. If they're on home page then keys will navigate for older and newer posts and if they're on posts then left, right keys will show next and previous posts. And I must say it's simple, clean, fast, reliable, convenient, light weight and easy to implement widget in blogger. Some of the top blogs are already using this feature on their blog from past few years, just to make their visitor comfortable. These sites were based on WordPress, HTML and blogger too.

Note: - The Arrow Key Navigation gadget won't work when you are typing something into a text box on the blog. This is so because you won't be able to type then. Page will keep on changing, thus in text box this option is disabled.

Below given code works with JavaScript. So to enable this navigation feature on your blog always keep in mind that you don't turn off JavaScript. Once code is embedded with you blog it works fine for Homepage, Archive pages and Post pages. 

Read Also: - 25 Most Useful Keyboard Shortcuts For Blogger Post Editor

How To Add Keyboard Arrow Key Navigation?

Just follow the step by step mentioned process and check whether it's working for your blog or not.

• Go to blogger.com.
• Login into dashboard with your account details.
• Then navigate to Template>>Edit HTML.
• Now press Ctrl+F and search for </head> tag.
• Copy the following code and paste it just above </head> tag.

<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>

• Save the template and that's it. Visit you website and check whether it's working or not.
• You can also add the above code in a gadget. Navigate to Layout>>Add A Gadget>>HTML/JavaScript. 
• Copy paste the code and save it. You're done.

We hope this tutorial has helped you to understand how to add Keyboard navigation in blogger. If you're using any other navigation system then please let us know. We would be happy to share it with our readers. If you've any doubt or query regarding this guide then leave your comments below.