Add a ‘top of page’ nav anchor to Blogger

Forcing readers to scroll through long pages can be the death knell for any aspiring blog. Thankfully it’s really easy to install a ‘top of page’ arrow image to streamline page navigation in Blogger blogs. Here’s how you do it…

Firstly I’d like to mention that the inspiration for this post came from an article I read over at Amanda’s excellent Blogger Buster site. You can find that article here: Add a “Top of Page” icon Link.

While Amanda’s post covers the topic very well there is one additional step I have added which solves a potential problem with the Safari browser. Anyway, in the interests of simplicity I have included all of the steps here, but feel free to check out Amanda’s article as well.

The nitty gritty

Installing the following code in your Blogger site will give you an “up arrow” image which floats on the bottom right side of your screen. Readers can then click this image to instantly scroll back up to the top of the page.

Step 1

Open up your Blogger Layout and copy the following code into a new “HTML/JavaScript” widget. I have included the link to the custom “up arrow” image I use on my site but you can easily replace it with one of your own.

Code:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#top" title="Back to Top"><img src="http://www.growlingdoggames.com/beginnersbloggingguide/ images/up_arrow.gif"/></a>

Now save the widget.

Step 2

Select the “Edit HTML” option, click “Expand Widget Templates” and find the following code (if you haven’t already – make sure you save a backup copy of your Blogger template to your hard drive):

<div id='header-wrapper'>

After the first </b:includable> tag in the Header, insert this code:

<a id='top' name='top'/>

Now save your template and take a look at your handiwork!

A word of warning

Without the second step I found that the “up arrow” wouldn’t scroll all the way to the very top of the page in the Safari browser.

Also – while the image file will float correctly in IE7, Firefox and Safari, in IE6 it will appear wherever you placed the widget. This is just another one of IE6’s many shortcomings.

Please note: you can adjust the position of the arrow by tweaking the css code you put in the widget i.e. instead of “bottom,” “right” you could put “bottom,” “left” etc.

If anyone wants a set of custom arrows let me know and I’ll create some and post them.