Arrow Keyboard Navigation for Blogger

Arrow Keyboard Navigation for Blogger

Most of our readers asked for How to Add   Arrow Keyboard Navigation for Blogger   Blog posts. Default blogger template shows older and new... 8:43:00 AM

Most of our readers asked for How to Add Arrow Keyboard Navigation for Blogger Blog posts. Default blogger template shows older and newer link navigation that appears at the bottom of the Blogger. Most of wordpress blog and HTML based website used keyboard navigation on their websites. Keyboard navigation is very fast, reliable and easy to use. Today we will provide you tutorial about how to add Keyboard navigation in blogger.

This is very simple and easy widget for blogger to get fast navigation through keyboard. If you want to see live demo than use the left and right arrow key of your keyboard to navigate different posts on this blog. This methods work with simple JavaScript and you can add this with follow some simple steps to add code in your blog.

How to Add Arrow Keyboard Navigation for Blogger

Please follow below steps to Add Arrow Keyboard Navigation for Blogger:

Step 1

Login into blogger account and Go to your blogger dashboard.

Step 2

Now Go to Template and Click on Edit HTML button as shown in below picture.

Step 3

Now Search below code with the help of CTRL + F:

</head>

Step 4

Now copy and paste below code above </head> tag:

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

Step 5

Click on Save Template button.