HackingUniversity - Hacks . Tricks . How-To's

10 August 2013

How to Navigate through Blogger Posts using Keyboard Keys

keyboard-keys-navigationEvery web owner tries to bring more and more easy functions to his site or application that can be handled by newbie users much more easily and conveniently. Well now days every website is implementing this keyboard hotkeys function to their website for making it much more easier to be navigated. Well even we applied this same technique on our blog earlier for navigating our posts using arrow keys & and now we expanding this thing by making other keys accessible for mostly used pages, but we will discuss about it later, so for todays tutorial we will will showing you how you can implement this technique in your blog and allow your visitors to navigate through your blog easily.

Well this technique simply includes a simple JavaScript that when added will manipulate your keys to open older and newer posts when promoted, so lets get started.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F and search for </head> tag & paste below code above it.

    <script type='text/javascript'>window.onload=function(){document.onkeyup=function(e){if(document.activeElement.nodeName=="TEXTAREA"||document.activeElement.nodeName=="INPUT")return;e=e||window.event;switch(e.keyCode){case 37:var t=document.getElementById("Blog1_blog-pager-newer-link");if(t!=null)window.location.href=t.href;break;case 39:var n=document.getElementById("Blog1_blog-pager-older-link");if(n!=null)window.location.href=n.href}}}</script>

  3. Now your code is placed just hit Save Template.
  4. You are done Bingo! your code is now placed and you can easily navigate your blog using Keyboard Keys & so refresh your blog and check yourself.