Menu
show-notice
hide-notice

How To Add Arrow Key Page Navigation In Blogger

on 27 May 2013

The visitor always love simpler and easiest blog. In case of page navigation, it's work an important role in blog in which the visitors of a blog to navigate older and newer post as well. So to make such things easiest and simpler for your blog's readers, then this arrow key page navigation will be useful for it. You might have seen this types of feature added in popular blog like Mashable, TNW etc..

It saves the time of scrolling down of page to find the newer and older post link and may irritate for the visitor to scroll down to find such links. This feature work on Index, Archive, Post, Statics Page as well. Just using right arrow or left arrow keyboard to navigate older and newer post. To implement this feature in your blog, all you have to click below Add to Blogger button to install with one click or you can follow second method. For Demo, let press any arrow key to navigate older or newer post from this page.


OR
Go to Blogger > Layout > Add Gadget > HTML/JavaScript and Copy-Paste the following code in it.
<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
};
</script>
Leave empty in title (Won't add title) and Save it.
As a result, the readers of your blog can easily navigate your blog to older and newer post. It will be more useful for visitor when you notice a sentence indicating this feature, because this arrow key navigation is not default feature of Blogger. This feature is an modern page navigation. Let us know your thoughts and comments below!

SHARE

1 comments:

Important -Comments with Links will be deleted immediately upon our review and If you are asking a question click the 'Subscribe By Mail' link below the comment form to be notified of replies.