Blog Tricks Center: How to add Arrow Key Navigation

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<i><b><span style="font-size: x-large;">Arrow Key Navigation for Blogger widget</span></b></i></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZ2ionbLEer0_j0UQJVOl85hJWa4YGB35rhh9o_OPQax_eFASSI0Mw0tzk2jgxeKyTFIfyo25AZqdjb2XgaaEV3dIi1s6OZQTFR1cZqp1KJpZjY2ZeWz1MmP2DH6eXZvchjmvB_9OMHSR/s1600/arrow-key-navigation-blogger%5B3%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZ2ionbLEer0_j0UQJVOl85hJWa4YGB35rhh9o_OPQax_eFASSI0Mw0tzk2jgxeKyTFIfyo25AZqdjb2XgaaEV3dIi1s6OZQTFR1cZqp1KJpZjY2ZeWz1MmP2DH6eXZvchjmvB_9OMHSR/s1600/arrow-key-navigation-blogger%5B3%5D.png" width="400" /></a></div>
<div style="text-align: center;">
<span style="font-size: large;"><i><br /></i></span></div>
<span style="font-size: large;"><i>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 widget to your blogger blog.</i></span><br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i>This is a really simple and clean widget and you can see a demo of this widget right on this page. If you use the Right and Left arrow keys, you will be able to navigate to different pages on this blog. This works not just on the post pages, but also on the blog’s home page and label pages.The Arrow Key Navigation Widget will be disabled when you are typing something into a text box on the blog(This was done to avoid the page from being changed when the user is typing something into a text box and uses the arrow keys to move around this text.).</i></span><br />
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i>Why should I add this widget</i></span><br />
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i>This is a simple light weight widget which doesn’t depend on any external libraries and it’s really easy to install as well. It will give users a better experience when they are navigating across different pages of your blog.They won't have to scroll all the way down to the bottom of the page and look for the Older and Newer page links.</i></span><br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-format="auto" data-ad-slot="6504860932" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i>How to add this Widget</i></span><br />
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i>You can add this widget by using the below one click installer.</i></span><br />
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<input name="go" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" value="Add Arrow Key Navigation Widget" /></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="color: #333333; font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="line-height: 25px;"><i>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.</i></span></span></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="color: #333333; line-height: 25px;"><span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><i><b>How to let readers know of this Widget</b></i></span></span></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="color: #333333; font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="line-height: 25px;"><i>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.</i></span></span></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="color: #333333; font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="line-height: 25px;"><i><b>How to Remove the Widget</b></i></span></span></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="color: #333333; font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="line-height: 25px;"><i>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.</i></span></span></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="color: #333333; font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="line-height: 25px;"><i><b>How this works</b></i></span></span></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="color: #333333; line-height: 25px;"><span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><i>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.</i></span></span></div>
<pre class="code" style="background: rgb(238, 238, 238); border: 2px solid rgb(231, 231, 231); color: #333333; font-size: small; font-stretch: inherit; line-height: 25px; margin-bottom: 10px; margin-top: 10px; overflow: auto; padding: 5px 10px; vertical-align: baseline;"><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></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
Please share your thoughts queries or suggestions :-) and if you need further help do let us know.</div>
</div>

Arrow Key Navigation for Blogger widget Navigating through a website using the keyboard arrow keys is really useful as you don't ...