Adding Page Navigation with Arrow Keys in Blogger

By: TestLab on 8:53 PM

Navigating Between Posts and Pages Using the Numbered System Sometimes Won't Work Effectively. So Here is a Different Navigation Style Which Works With Arrow Keys. For Instance If You Press Left Arrow You'll be Landed on Previous Page and by  Right Arrow Obviously on the Next Page.

Well This is a Cool feature. it Doesn't Take Much Time And Saves the Scrolling Down Time to Search for the Older,Newer Page Links.. Try This Trick On This Blog itself By Pressing Right or Left Arrow Key.

Steps :.
Only Two Important Steps are Required to Apply this Hack to Your Blog.

Step1: Editing "Blog Paper" Element In Your Blog's Template
Step2: Adding a Simple Script Before Closing </body> Tag.

Page Navigation With Arrow Key To Blogger:.

Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed

Backup your Template before making any changes to your blog

Now  Expand Widget Templates

Using your browser's search function, locate the following section of code:

 <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

Now Edit the text highlighted in bold red so they appear like this instead:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='newer'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='older'><data:olderPageTitle/></a>
      </span>
    </b:if>

Now Locate  </body> In your Blog's Template And Paste the Below Code Above It.

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode)
{
case 37:
window.location.href = document.getElementById(&#39;newer&#39;).href;
break;
case 39:
window.location.href = document.getElementById(&#39;older&#39;).href;
break;
}
};
};
</script>

So You're Done Adding the Tweak. But i Advise You to Preview Your Template First.Before Going to Apply the Changes.

If Everything is Okay Then Just save the Template. And Enjoy the Keyboard Shortcuts For navigating through Your blog.that's it.