Adding Page Navigation Arrow Keys in Blogger

One of the most useful features of a blog site is the navigation keys. Amanda Kennedy shows you a hack on how you can add page navigation arrow keys in Blogger.
2 steps:

• Edit “Blog-Pager” element in template HTML.
• Add simple script just before closing </body> tag.

Add the needed code:

Look for this code using you browser’s search function:

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

Edit highlighted in red text:

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

The easiest way is to replace the code in your template with the replacement code above.
Next, locate the closing </body> tag in your template. Immediately before it, paste the following section of code:
Locate closing </body> tag in template. Paste the following code before 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>

Preview your template to see if there are any errors made.
Save the template if everything is good.