How to Add Keyboard Navigation in Your Blogger Blog

Advertisements
One of our user recently asked how we add keyboard navigation in our Blogger blog posts. Default Blogger template displays navigation link through the older and newer post link that usually appears at the very bottom of the Blogger achieve page.  However, we have seen many WordPress as well as HTML based sites that used Keyboard navigation  From our experience and knowledge, keyboard navigation is fast, reliable and convenient. Today in this article, we will show you how to add keyboard navigation in Blogger.

This method works with JavaScript, so it makes it a lot easier to apply and made it safely. However, it would stop working if someone would turn off JavaScript, so there are some drawbacks which you need to know before applying it to your blog or website. It works pretty well on Homepage, Archive pages and even post pages. All you need to do is to Press the Left and right Arrow buttons to navigate.

Note: If you want to navigate to the next page, you will press the “Right Arrow Key” and when you want to navigate to the previous page, you will press the “Left Arrow Key” located on your keyboard. 

Before you learn how it works, Let see the Demo Here

The First thing you need to do is to Login into your blogger dashboard. Now go to Your Blog >> Template >> Edit HTML and search for the ending </head> tag. After finding the tag, just above it paste the following JavaScript coding. Once everything is done press the “Save template” button located on the bottom to conclude.

<script type='text/javascript'>
window.onload = function()
{
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>

Congratulations: That’s all, now visit your blog and Press either “Left” or “Right” arrow keys to see how perfectly everything works. It is extremely responsive and works pretty well. 

Many users still believe that using JavaScript could cause slowness, but this is not what we should be thinking. If a script is correctly optimized, then there is no way it could affect your site speed. Here at MyBloggerLab, we use more than 20 JavaScript files, but the page speed is still 90+ out of 100.

We hope this tutorial has helped you to understand how to add Keyboard navigation in blogger. What navigation system are you using? Let us know what you think about this tutorial? Feel free to leave your suggestions in the comments below. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

11 comments

June 11, 2013 at 12:19 PM

Great post buddy! Really liked it but using too many scripts will decrease the loading speed. Let me know your opinion about it.

June 11, 2013 at 3:39 PM

Nice post ^^

June 11, 2013 at 9:09 PM

Great post buddy! Really liked it but using too many scripts will decrease the loading speed. Let me know your opinion about it..ather.khan.com

Editorial Team MOD
June 12, 2013 at 12:25 AM

Many users still believe that using JavaScript could cause slowness, but this is not what we should be thinking. If a script is correctly optimized, then there is no way it could affect your site speed. Here at MyBloggerLab, we use more than 20 JavaScript files, but the page speed is still 90+ out of 100.

June 12, 2013 at 9:16 AM

Thank. I'm using it on my blog now. You can see it at here > http://www.salazryl.my/2013/06/candy-crush-movie.html

June 12, 2013 at 9:22 AM

its depends ,what type of script you are using ........

June 13, 2013 at 2:38 AM

Yes scripts make blog load heavier, the reason is because, scripts are prioritized to load by web browsers. That's why it's best to place scripts on the bottom page, cause that way, at least your main elements are already executed when the web browsers load its scripts.

However, maybe it's not realy a matter if the browsers, providers and the devices are all advanced. It's just a matter of loading right?

June 15, 2013 at 4:46 AM

Is there any way to minimize the javascript size ?

Editorial Team MOD
June 16, 2013 at 2:53 AM

Upload all JavaScript in one File and then use it on your blog. Or try compressing it

July 26, 2013 at 6:29 AM

how can i change the hotkey?

July 24, 2015 at 1:24 AM

Nice! Thanks

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.