Control your Blogger using arrow key (next post | Previous post)

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqvE2V79Lez09319LJCvLlKf78ALDRLK8f-C0LrL46vL7iGkvqRJ_Ya_TwT4hmW80-WwnHK4Qw6AXa4drRRepS4HOoTwJvnppmZU3D7jLNbf3QBnCGclXEBILgmzUBCRjyBc4n0MxvgA/s1600/arrow-key-navigation-blogger%255B3%255D.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqvE2V79Lez09319LJCvLlKf78ALDRLK8f-C0LrL46vL7iGkvqRJ_Ya_TwT4hmW80-WwnHK4Qw6AXa4drRRepS4HOoTwJvnppmZU3D7jLNbf3QBnCGclXEBILgmzUBCRjyBc4n0MxvgA/s1600/arrow-key-navigation-blogger%255B3%255D.png" /></a></div><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;">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.</div><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;">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<strong style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Right and Left arrow keys</strong>, 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.).</div><h3 style="background-color: white; border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; color: #333333; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">Why should I add this widget</h3><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;">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.</div><h3 style="background-color: white; border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; color: #333333; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How to add this Widget</h3><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;">You can add this widget by using the below one click installer.</div><form action="http://www.blogger.com/add-widget" method="post" 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: 0px; padding: 0px; vertical-align: baseline;" target="_blank"><div style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; 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="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">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.</div><h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How to let readers know of this Widget</h3><div style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">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.</div><h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How to Remove the Widget</h3><div style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">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.</div><h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-size: 20px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">How this works</h3></form><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;">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.</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'><br />document.onkeyup = function(event)<br />{<br />if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;<br />event = event || window.event;<br />switch(event.keyCode)<br />{<br />case 37:<br />var newerLink = document.getElementById('Blog1_blog-pager-newer-link');<br />if(newerLink !=null) window.location.href = newerLink.href;<br />break;<br />case 39:<br />var olderLink = document.getElementById('Blog1_blog-pager-older-link');<br />if(olderLink!=null) window.location.href = olderLink.href;<br />}<br />};<br /></script></pre><a href="https://www.blogger.com/null" name="more" style="background-color: white; border: 0px; color: #41b7d8; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin: 0px; padding: 0px; transition: background-color, color 0.2s linear; vertical-align: baseline;"></a><span style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;"></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;">Please share your thoughts queries or suggestions :-) and if you need further help do let us know.</div></div>

Control your Blogger using arrow key (next post | Previous post)

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

Read more »