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