Enable Keyboard Arrow Navigation to Blog Posts
Most of our readers use to ask me how to add or enable keyboard arrow navigation to blogger posts . So here I came with the solution . Many of the now a day websites and wordpress Blogs using this feature in making things go easier for the readers .
Default blogger template shows only navigation links at the bottom of your every post . Today I gonna explain you how adding or enabling this feature to your Blogger Blog.
You can use your right / Left keyboard arrows for Live demo here in this Blog which navigates you to next and previous posts .
Check it friend ...
Okay lets go into the topic .
How to enable Keyboard arrow navigation to Blogger posts :
Go to Blogger >>> Template >> Edit Template
Search for " </head> " by using Ctrl + F
Just above to the </head> tag , past the below Code .
<!-- code for keyboard arrow navigation by www.myblogstory.com -->
<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>
<!-- end of code keyboard arrow navigation by www.myblogstory.com -->
<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>
<!-- end of code keyboard arrow navigation by www.myblogstory.com -->
Thats it and you are done . Enjoy Blogging ... :)
No comments:
Post a Comment