Monday, May 27, 2013

How to Add Arrow Key Navigation To Your Blogger Blog

Author: Gagan Masoun
How to Add Arrow Key Navigation To Blogger Blog
Google announced arrow keys feature for Gmail in February, 2013. Means you can navigate Gmail account items using your keyboard arrow buttons. If you want to give this facility to your blogger blog readers then I will guide you here. This is really cool feature. In this article, we will show you how to add arrow key navigation to your Blogger blog. It’s really simple to implement this feature on your Blogger Blog.

When your readers use the Right and Left arrow keys on keyboard, they will be able to navigate to another posts of blog.

Why Should I Use This Widget

With the help of this widget your users can easily navigate your older or news posts with the keyboards directly. This is light weight widget, so will not take so much time for loading. 

How to Add This Widget

The first thing you need to do go to Blogger dashboard. Now select your blog and go to Template ›› Edit HTML, and find </head> code in your template. Copy-paste given code above </head>.

<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: You have successfully added a arrow key navigation JavaScript code to Blogger Blog. You can now preview your blog and see whether everything is working good or not. Let us know if you face any errors or bugs. Happy Blogging :)

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

0 comments:

Post a Comment