The Page gadget: a menu bar for your blog, with links to just about anywhere

This article shows how you can use the Pages gadget as a general purpose menu bar for your blog.

Evolution of the pages gadget

When Blogger first introduced so-called "static" pages, I thought they had a lot of potential.

As I investigated, though, I came to the conclusion that they were more trouble than they were worth, so I recommended abandoning them and just using posts. Or at least abandoning the Pages gadget - even I sometimes use a Page for things that I don't want to send out in my RSS feed, eg custom-search-engine results.

But when the September-2011 version of Blogger was introduced, the Pages gadget got a new feature: now, it can include links to any website URL, not just your own pages.

This makes it a lot more versatile - even though the effect is just the same as adding a Link-list gadget and putting it into the right area of the blog-layout.

How to add general web-links to your Pages gadget

Go to the Layout tab of your blog's dashboard.

If you are not already using the Pages gadget, then add it - the same way you would add any other gadget. Otherwise just click Edit on your current Pages gadget to see the gadget-options.

Click the + Add Link Page option

Enter the title that you want to show up on your menu bar (phrases with spaces are allowed, some special characters may not be), in the Title field

Enter the URL which should be opened when someone clicks on the new menu-bar item (make sure the web-site address starts with http:/ ) in the Web-address field:

Click Save

You can change the order of the items in your menu bar by picking them up using the "grab bar" to the left of the item name, and drag-and-dropping them up or down the list of entries entries.

And you can remove external web-addresses by clicking the small grey "X" to the right of their Title.

When your menu-bar items are in the right place, click Save to apply them, and then Save Arrangement in the top right corner of the Blogger dashboard.

What your readers see

Visitors to your blog using a web-browser on a non-mobile device will see a menu bar either at the top or the side depending on where you put your pages gadget.

Visitors using a mobile device will see the same thing if you do not have a mobile template enabled, or a slightly different style of menu (drop-down) if you do have a mobile template.

Most readers will think that the items in your menu bar will take them to "pages" in your blog. If they hover over an item in the bar, they will see the web-address it is linked to, in the same way that their browser usually shows this (eg in Chrome, I see it in faint text at the bottom left of the screen).

This will work well if the web-addresses you have added are within your own blog (eg search-labels, if you are using this approach to putting your posts into pages).

But it may be confusing if you've put in links to other websites, or invalid links (remember, there was no "test this link" option when you were adding the web-site URL to link to).

Currently I do not know any way to make pages-gadget links to external websites open in a new browser window. If this feature is necessary, then your only option is to use a hand-coded HTML gadget instead of the Pages gadget.

The Pages-gadget vs a Link-list

When the Pages-gadget was first introduced, they were just like regular linked-list: the magic was that Blogger introduced a new area in the templates where linked-lists are formatted differently.

This is still true to a great extent. But on blogs viewed with dynamic templates, the presence of a Pages gadget causes the layout to be a little different.

I haven't tested it thoroughly, but I suspect that the presence of a link-list gadget on the template (remember, you cannot add gadgets to dynamic template blogs) would not have the same effect.

This makes me suspect that Blogger may introduce some other enhancements based on the Pages gadget, so it may be worth using them instead of Link-list gadget in the future, so as to get the benefit of these changes when they eventually happen.