Menu Close Menu

Blogger Easy Navigation with keyboard arrow keys

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

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

  2. This comment has been removed by a blog administrator.


Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.