How to add Arrow Key Widget for Blogger ? - Blogger Tips and Tricks

Latest

Friday, September 19, 2014

How to add Arrow Key Widget for Blogger ?

 add Arrow Key Widget for Blogger 

You can add this widget by using the below one click installer.


Add the widget to your sidebar or footer and the Arrow Key Navigation will be activated on your Blog.The Widget title won’t appear on your Blog. So you can give it any appropriate name which will help you in identifying the widget on the layout page.

How to let readers know of this Widget

You might want to add some text to your blog which suggests that your Blog can be traversed using the keyboard arrow keys.Something message similar to “Use the Left or Right Arrow keys to navigate through this blog” might help.

How to Remove the Widget

If you want to remove this widget at any time, you can do that by removing the Arrow Page Navigation Widget from the Layout page.

How this works

If you are curious about how this works, then below is the actual code behind the widget. The code listens for Keyboard inputs and if detects an Arrow Key event, it will redirect the user to the newer or older page. The code picks the newer and older page links from the Blogger’s Page Navigation Links.

<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>
 
Please share your thoughts queries or suggestions :-) and if you need further help do let us know.

No comments:

Post a Comment