How To Add Together Keyboard Navigation Inward Your Blogger Blog

One of our user late asked how nosotros add together keyboard navigation inward our Blogger spider web log posts. Default Blogger template displays navigation link through the older as well as newer post link that ordinarily appears at the really bottom of the Blogger accomplish page.  However, nosotros convey seen many WordPress too equally HTML based sites that used Keyboard navigation  From our sense as well as knowledge, keyboard navigation is fast, reliable as well as convenient. Today inward this article, nosotros volition demonstrate yous how to add together keyboard navigation in Blogger.

This method plant alongside JavaScript, thus it makes it a lot easier to apply as well as made it safely. However, it would halt working if mortal would plough off JavaScript, thus at that spot are around drawbacks which yous demand to know earlier applying it to your spider web log or website. It plant pretty good on Homepage, Archive pages as well as fifty-fifty post pages. All yous demand to practice is to Press the Left as well as right Arrow buttons to navigate.

Note: If yous desire to navigate to the adjacent page, yous volition press the “Right Arrow Key” as well as when yous desire to navigate to the previous page, yous volition press the “Left Arrow Key” located on your keyboard. 

Before yous larn how it works, Let run into the Demo Here

The First affair yous demand to practice is to Login into your blogger dashboard. Now become to Your Blog >> Template >> Edit HTML as well as search for the ending </head> tag. After finding the tag, but higher upward it glue the next JavaScript coding. Once everything is done press the “Save template” push located on the bottom to conclude.

<script type='text/javascript'>

window.onload = function()

{

document.onkeyup = function(event)

{

if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;

number = number || window.event;

switch(event.keyCode)

{

example 37:

var newerLink = document.getElementById('Blog1_blog-pager-newer-link');

if(newerLink !=null) window.location.href = newerLink.href;

break;

example 39:

var olderLink = document.getElementById('Blog1_blog-pager-older-link');

if(olderLink!=null) window.location.href = olderLink.href;

}

};

};

</script>

Congratulations: That’s all, immediately view your spider web log as well as Press either “Left” or “Right” arrow keys to run into how perfectly everything works. It is extremely responsive as well as plant pretty well. 

Many users withal believe that using JavaScript could motility slowness, but this is non what nosotros should live on thinking. If a script is correctly optimized, as well as thus at that spot is no agency it could touching your site speed. Here at MyBloggerLab, nosotros work to a greater extent than than twenty JavaScript files, but the page speed is withal 90+ out of 100.

We promise this tutorial has helped yous to empathize how to add together Keyboard navigation inward blogger. What navigation arrangement are yous using? Let us know what yous intend almost this tutorial? Feel gratuitous to travel out your suggestions inward the comments below.