Arrow Key Navigation for Blogger

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.

Demo​

How to add this Widget?
Go to Blogger -> Layout -> Add widget HTML/Javascript and paste the code below

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

Code (markup):

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

View more​

 

Or just use a browser that has it built/in like Opera 12/lower. (As opposed to the steaming pile of crippleware that Opera 15/newer is, aka Chrome with the Opera logo slapped on it). E/D to navigate through elements, W/S to navigate through headers, Q/A to navigate through links... and forward will automatically pick up the LINK REL="next"... Blogger does provide proper REL links for previous and next, right?

You know, might be interesting to make that a plugin or user.js people can install in their browsers.

 

Oh, some other advice -- some sensible formatting might be nice, attaching the event instead of using document.onload would be a good idea so other scripts can still attach to the keyboard if need be... putting it into an anonymous function to which you pass document can also make it easier to access 'document'. (Google uses that trick all the time)... and since you're performing the same operation on two different ID's, I'd consider making that a function.

(function(d) {
	function locationTo(id) {
		var link = d.getElementById(id);
		if (link) window.location.href = link.href;
	}
	f = function(e) {
		e = e || window.event;
		switch (d.activeElement.nodeName) {
			case 'TEXTAREA':
			case 'INPUT':
				return;
		}
		switch(e.keyCode) {
			case 37: locationTo('Blog1_blog-pager-newer-link'); break;
			case 39: locationTo('Blog1_blog-pager-older-link'); break;
		}
	};
	if (d.addEventListener) d.addEventListener('keyup', f, false);
		else d.attachEvent('onkeyup', f);
})(document);

Code (markup):

Implements those improvements.