Computing Magazine

Script For Keyboard Navigation In Blogger - Arrow Keys

Posted on the 02 January 2016 by Rahulthepcl

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 This feature is called Keyboard arrow key navigation. It allows your blog visitors to navigate your blog using arrow keys as navigation in blogger.
left arrow key and right arrow key. If they're on 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 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.

window.onload = function()

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

Back to Featured Articles on Logo Paperblog