How to add arrow keys to navigate in blogger techpro365

Hi! Guys in this post I would like to tell you ‘How to add arrow keys to navigate in blogger’.

This widget helps you to navigate from one page to next page and also one post to the next. Navigating through this widget is so helpful because otherwise we have to search for the next post link on the blog, with this that problem can be avoided.

Adding and removing this widget from your blog is so simple. You can add it by clicking on the ‘Add to Blogger’ button.

How to let others know of this?

You can do it by adding some floating images like I done it on this blog. You can let them know by showing some text on your blog.

If you want to show some floating images follow these simple steps.

Go to template. At first backup your template and click on edit HTML.

Search for ]]></b:skin> . You can do this by pressing Ctrl+F.

Add this below code just before ]]></b:skin>.

#float_techproleft {
position:fixed;_position:absolute;bottom:270px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#float_techproright {
position:fixed;_position:absolute;bottom:270px;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Now search for </body> and add the below code just before </body>.

<div id='float_techproleft'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpKwAhadNwnudfI-BcSsxgTk7g-1cssKRm_bIolNuz147DRABSd75QiofSVPdkTNWBKmITC_y3I1zKn5HI_KWpDYyEvFndA5-kqwQ9Ujxo0MrAV-mmzK0r59HeAsxSKyoSmkatRw4BtBb/s1600/left.png' title='use keyboard keys to navigate'/>
</div>
<div id='float_techproright'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPQ2G_YsV-pCaxkuBBjzoylRTq9xh6QutOeMyb69M7_yBmyiV8REpNTKU-zzKZ16ff79t2WvMOFp53YVLitJbL9yUzGPxhhpY7sRA3yQ4TcQQ5VmfZPduf8B_dOrm1azl6HzdjgyK4XPD/s1600/right.png' title='use keyboard keys to navigate'/>
</div>

Now click on ‘save’ button and you can see the changes on your blog.

You can edit the image links of the navigation keys in the above code.

If you have any genuine problem regarding this post please feel free to contact.

Print Page

Do you like this post? Please link back to this article by copying one of the codes below.

URL:

https://techpro365.blogspot.com/2013/06/how-to-add-arrow-keys-to-navigate-in_19.html

HTML link code:

                        <a href="
                        https://techpro365.blogspot.com/2013/06/how-to-add-arrow-keys-to-navigate-in_19.html
                        ">
                        How to add arrow keys to navigate in blogger
                        </a>

BB link code:

                        [url=
                        https://techpro365.blogspot.com/2013/06/how-to-add-arrow-keys-to-navigate-in_19.html
                        ]
                        How to add arrow keys to navigate in blogger
                        [/url]