Navigating through a website using the keyboard arrow keys is really
useful as you don’t have to look around the page for the Newer or Older
page links. You might have already seen this feature on many top
blogs.It’s really easy to implement this feature on your Blogger
Blog.You just have to add the arrow key navigation widget to your
blogger blog.
This is a really simple and clean widget and you can see a demo of this widget right on this page. If you use the
Right and Left arrow keys,
you will be able to navigate to different pages on this blog. This
works not just on the post pages, but also on the blog’s home page and
label pages.The Arrow Key Navigation Widget will be disabled when you
are typing something into a text box on the 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 this text.).
Why should I add this widget
This is a simple light weight widget which doesn’t depend on any
external libraries and it’s really easy to install as well. It will give
users a better experience when they are navigating across different
pages of your blog.They won’t have to scroll all the way down to the
bottom of the page and look for the Older and Newer page links.
How to add this Widget
You can add this widget by using the below one click installer.
Add the widget to your sidebar or footer and the Arrow Key Navigation
will be activated on your Blog.The Widget title won’t appear on your
Blog. So you can give it any appropriate name which will help you in
identifying the widget on the layout page.
How to let readers know of this Widget
You might want to add some text to your blog which suggests that your
Blog can be traversed using the keyboard arrow keys.Something message
similar to “Use the Left or Right Arrow keys to navigate through this
blog” might help.
How to Remove the Widget
If you want to remove this widget at any time, you can do that by
removing the Arrow Page Navigation Widget from the Layout page.
How this works
If you are curious about how this works, then below is the actual
code behind the widget. The code listens for Keyboard inputs and if
detects an Arrow Key event, it will redirect the user to the newer or
older page. The code picks the newer and older page links from the
Blogger’s Page Navigation Links.
<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>
