Blogger Easy Navigation with keyboard arrow keys

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 script to your blogger blog. This feature work on Index, Archive, Post, Statics Page as well. Just using right arrow or left arrow keyboard to navigate older and newer post. To implement this feature on your blog is very easy.

For live Demo, let press any arrow key to navigate older or newer post from this page.

 

Add It To Blogger

 

1. Go To Your Blogger Dashboard>> Template>> Edit HTML>>

2. and find the following code. </head>

3. and paste the following script before/above </head>

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

You may want to let visitors know that they can navigate to newer/older posts using the arrow key as this is not a default feature of Blogger. For example, you could add a widget in your layout explaining the arrow key navigation.

 

What do you think about this cool script

The code is self explanatory and would not trouble many of you. If you have any questions then please do not hesitate to let me know. I hope this little effort may prove helpful for most of you. Thank you for taking time and reading this tutorial. Peace and blessings.