Add a Top of Page Link to Blogger Templates

We all know how annoying it can be sometimes to have to scroll all the way back to the top of a page after reading a long blog post and a long list of useful comments. Just being able to click a link to take us straight back to the top is much easier.

Some blogs have added them to the bottom of sidebars, some have added them to footers if they have them. The easiest way to add the link is to place it so that it appears at the bottom of each page just above the standard Blogger navigation links to Newer Posts, Home and Older Posts.

It is simply a case of adding a link back to the header to the template code:

<p><a href='#header'>Top of Page</a></p>

Before you do, download the full template to keep it safe in case of problems then expand the widgets so that you can find the following section of code:

</b:loop>
   <data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>

To find this use your browser’s search/find (CTRL+F) to look for nextprev. The one you want is the second one as shown above. (The first is the includable which is used to make nextprev work.) Then add the link as shown in red.

</b:loop>
   <data:adEnd/>
</div>
<p><a href='#header'>Top of Page</a></p>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>

Click Preview to make sure that all is well and if so Save the template.

You may have to make one or two tweaks to achieve the correct layout. For instance in the illustration above, which is taken from the WP Premium Red template there was no space above or below the link. Surrounding the paragraph with breaks brought about the above layout.

<data:adEnd/>
  </div><br/><br/>
<p><a href='#header'>Top of Page</a></p><br/><br/>
  <!-- navigation -->
  <b:include name='nextprev'/>

Adding a class and styles could have been used instead, but this was much easier and requires less code.

Occasionally, as in the template used for this blog, '#header' may not take you quite to the top. This is because something, such as a navigation bar has been added above the header. The solution is to use '#header-wrapper' instead:

<p><a href='#header-wrapper'>Top of Page</a></p>

That takes you right to the top of the page and includes the navigation, which is probably what your reader was trying to reach in the first place.

You can, of course change the wording of the link as you wish. For instance Jump to Top, Return to Top or just Top will do as long as it is clear to your reader.

If you prefer to add the link to the sidebar or footer the format is basically the same and the format and styling are up to you as long as it is right for your blog design.

Read more...

Google Search Gadget for Blogger

Blogger has now taken the Google search gadget out of draft and added it to the list of gadgets you can add to your blog sidebars. This means you can use Add a Gadget to add  and configure it instead of having to set it up in Google Custom Search, then copy the code into an HTML/JavaScript gadget to insert it the blog.

In the Configure Search Box window you can choose whether you want your readers to be able to search just your blog, the whole Web, pages you have linked to or the sites in your Blog Roll and link lists. Or, perhaps, all of them.

The choice is yours, as is the title. You may want to change it from the default “Search This Blog” to whatever best suits your requirements.

Clicking on “Save” when you have made your choices will add the gadget using your blog’s style and colours. So you will no longer need to bother about styling it to match the blog.

Now, in case you are wondering why the search choices are listed under tabs it is because the search results will open in tabs in your blog and will be styled to suit the look and feel of your blog. You can see an example here on Google’s Ajax APIs Blog.

A word of caution. If you have not made your blog public so that it can be indexed by search engines you will be given a warning notice. If you continue and click save, the gadget will be added but may not appear in your sidebar until you go to Setting>Basic and change the selection next to “Let search engines find your blog” to Yes.

Once installed you will have a custom search engine which, because it uses the Ajax Search APIs, will be constantly updated as you change or update your link lists and Blog Roll. And, best of all, the results will be inline and closely integrated with your blog.

The only gripe I have is that you cannot do this for AdSense for Search. So you will still have to configure AdSense for Search yourself and copy the code to the HTML/JavaScript gadget. Let’s hope that Blogger introduces an AdSense version soon.

Read more...