Home » Blogger Tutorials, Tricks and Hacks » Adding Page Navigation Arrow Keys in Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding Page Navigation Arrow Keys in Blogger

Adding Page Navigation Arrow Keys in Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,069 views

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.

 

Liked It ? Please Share

Comments

4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Vijesh says:

    Can you place a screenshot of how the links look after including the code so that we can edit the code if we like how it looks.

  2. thanks for detailed explaination , please provide sanpshot also . thanks

  3. Really amazing write up and detailed guideline . Thanks mate.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here