However, we have seen many WordPress as well as HTML based sites that used Keyboard navigation. You all can see your Previous/Next post via using there button but will it not awesome if we will change it to keyboard keys to navigate through your blogger posts? We all know that keyboard shortcuts are faster than mouse movements. What if you can add keyboard shortcuts to your Blogger blog like arrow key navigation? It would be great isn't it. With keyboard shortcuts active on your blog you don't have to look for next and previous links. It's very easy to implement this feature on Blogger blog. You just have to add widget to your blog.
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. You can use the right and left arrow keys on your keyboard to navigate to previous and next posts on your blog. The arrow key navigation will be disabled when you are typing something into a text box.
How This Code Works?
Why You Should This Code?
Our first priority is to make our visitor comfortable for that we add some related posts links in article body, add related post widget, sdd random post widgets, design our 404 page and other a lot of things too. Now after using this code we can make our visitor more comfortable because now they don't have to use there mouse to click on the Next/Previous post button to move forward on other post and click on scrollbar up and down button to scroll up and down our post. Through this code, we can allow them to do all things via keyboard only like up and down is default in all browsers but this code will allow your visitor to check your Next/Previous post via keyboard click too. It mean that now he can use keyboard ←↓↑→ to check your blog all around.
1.) Awesome And Stylish Code.
3.) Will Not Conflict With Any Other Code.
4.) Fully Optimized.
5.) Quick To Load And Easy To Install.
6.) Will Not Effect Your Blog Loading Time.
7.) Cross Browser Support.
8.) Left Keyboard Arrow Will Leads Your Visitor To Newer Posts.
9.) Right Keyboard Arrow Will Leads Your Visitor To Older Posts.
10.) Up And Down Will Work As It Is Doing In All Blogs, Ups And Downs.
11.) Your Next/Previous Post Button Will Also Work Too.
12.) This Code Will Work On All Pages/Posts.
13.) Disabled When You Type Text In Input/TextArea.
15.) Your Next/Previous Button Still Remain Working.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire "Blog".
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </body> Code.
7.) Now Copy The Below Code And Paste It After </body> Code..
8.) Click "Save Template" And Done.
window.onload = function()
document.onkeyup = function(event)
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
There Is No Need Of Customization. Save And Enjoy...
Notify Your Visitors Too.
As you know that this feature is new in blogger and many newbies don't know about it so it's your responsibility to make them know about this by showing some awesome text or image about it that we are using and allowing this features because we have enabled it on our blog. You can use any image or text like "Use ← ↓ ↑ → Keys To Navigate Through Posts" or what you want.
WoW: That's all, Done. 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. Now how you feel about this, Let us know your views about this via comment and don't forget to share this too. If you have any query, feel free to ask us freely. We will reply you too.