Saturday, January 21, 2012

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.





Related Articles

Putting your posts into Pages

Making your links open in a new browser window or tab

How to add a gadget to your blog

Adding gadgets to dynamic view blogs

The difference between posts and pages

What are dynamic blog templates?

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

52 comments:

  1. I just started Blogging not long.I nEed tips on how to make my blot popular And successful

    ReplyDelete
    Replies
    1. The best tip is to write good quality, original content. There are lots of others after that - maybe check out ProBlogger, or Nitecruzr (google them).

      Delete
  2. this was really helpful...gud work

    ReplyDelete
  3. I thanks to you for the post. But, I hate when blogger make this not simple. Moreover I get a trouble when save the arrangement. I choose page shown as upper tabs, but after I klik save, it automatically turn to side setting, not in upper. :(

    ReplyDelete
  4. Huh..finally what i've been looking for. thanks man

    ReplyDelete
  5. Thank you for the great post! Is there a way to have the link open in a new tab?

    ReplyDelete
    Replies
    1. When using the Pages gadget, I'm afraid not. The only option is to use a HTML gadget, and put a linked-list in it - with this, you can add the open in new page code to links.

      Delete
    2. Had spotted this needed an answer and as you asked it Kate I will answer it. Sorry if it has already been pointed out below, I didnt read on before posting this.

      If you edit the template you are using for your blog (template - edit HTML) and in the code section (jump to the widget using the drop down provided above the code window) and where you see this line:



      click the "..." to expand the code and where you see the "a" tag enter target='_blank ensuring spaces either side to avoid non valid code. This will then ensure all links within the widget open in a new tab.

      Hope this helps :)

      Delete
  6. Hi
    Thank you very much. I was searching for an answer for PAGES & lining my posts with the Topics on Menu bar. My search finally ends here. Great help!!
    Regards

    ReplyDelete
  7. Finally I learned to link my posts to menu bar(PAGES).
    Thank you.

    ReplyDelete
  8. Thank You!!! I've been search for so long how to do this. It was a great help!

    ReplyDelete
  9. Hello, many thanks for the advice and instructions, and there is a but, i have just one question when i click on one of the label buttons the text jumps to the to of the button and does not stay centered, do you know why this would be ? many thanks Carrie x
    http://domesticnaughtiness.blogspot.com.es/

    ReplyDelete
    Replies
    1. Hi Craig,

      just dropped by your blog, and found it impressive. well this is not to answer your question above, but i thought of sharing something i found effective. That "home" button that you have as a tab in your PAGES bar. I see you have like 2 of them. I tried to remove that Home button but can't be removed. So i edited the text and keyed in the blank letter code which is Alt+0160 and the letter goes of.

      So then you can have just one home button.

      All the best. :D

      Delete
  10. Just a note about this, "Currently I do not know any way to make pages-gadget links to external websites open in a new browser window. (If you know a way, the comments area is just below - please share!)" - to open the page in a new tab, just right click on the page-gadget and click 'open link in new tab' easy!

    ReplyDelete
    Replies
    1. Indeed, readers can choose to open them in a new tab this way. But there's no way I know for the blog-owner to enforce it.

      Delete
  11. Plz also post about how to create multi-menu, thanks alot

    ReplyDelete
    Replies
    1. Hi Jatam, lots of other helpers have also posted about this. Here is one article from a helper who I respect a lot: http://www.bloggersentral.com/2009/10/installing-multi-level-css-dropdown.html

      Unfortunately you need to edit code, and quite complicated code at that, to do this, so it's not something I'm recommending to people.

      Best of luck if you do try it yourself.

      Delete
  12. Can anyone tell me how I can create a static page without a link in the top tabs, and without the share buttons. Having a contact page with share buttons is dumb, but I can't fugure out how to accomplish this stuff out with this version of blogger. Everything is see in tutorials is stuff that can't be done with the current version of blogger.

    ReplyDelete
  13. you have no idea how helpful this was! thanks heaps!

    ReplyDelete
  14. Hi. Thanks for this. I set mine up, but the links don't work. When I edit the page gadget the link has changed to "javascript".

    Any ideas?

    Thank you

    ReplyDelete
    Replies
    1. Indeed, there's a post on Blogger's official "Known Issues" blog saying that this feature isn't working at the moment: http://knownissues.blogspot.com/2012/09/pages-linking-to-external-web-address.html

      Hopefully they'll have it fixed soon.

      Delete
  15. Is there a way for me to have my pages divided on either side of my blog? I want to have some of my pages listed on the left, have my posts in the middle, and then have more of my pages listed on the right. I tried searching for a solution but I can't find a place to type in the HTML info they are giving me in order to create 2 pages sections.

    ReplyDelete
    Replies
    1. Forget using the code someone gave you.

      Go into Template > Customize > Layout, and choose a Body-layout option that has a sidebar on each side. Save that.

      Then go back to the Layout tab, and put linked-list gadgets with your page-links into the sidebars.

      Delete
  16. You may have already answered this...but I am wondering if there is any way to have a page that links directly to an outside url open in a new window. Thanks for any help you can provide.

    ReplyDelete
    Replies
    1. Not if you're using the Page gadget: it just doesn't give that as an option.

      But you could put a regular HTML gadget into the place where the Page gadget would go, and put a linked-list into it. Because it's just HTML, you can edit the code and put target="_blank" into the link statement. And because it's a linked list in that area, it will pick up the "pages gadget" formatting from your template.

      Delete
  17. Thank you, that is I was looking for! Thanks a lot!

    ReplyDelete
  18. Thank you for this tutorial! :) I've created pages but when I choose to set pages as upper tabs beneath header (and I don't have header gadget, I have picture gadget for header) and click save, it turns my pages in the list and in the large font format. Please help!

    ReplyDelete
  19. Technically you could write custom CSS to open any anchor tag in a new window. The only problem with this would be all your page links would open in a new tab...

    ReplyDelete
  20. You're one awesome person. THANK YOU! (:

    ReplyDelete
  21. I set up pages that use labels in order to get those posts on the pages, only at the top of the pages this is what the visitor sees: "Showing posts with label mac and cheese. Show all posts" before the posts. Is there a way to remove that at all? It's not super critical, but it would be nice if it were invisible.

    ReplyDelete
  22. I am still having trouble separating my post into the pages? I have copied the links of the pages like it is shown above and also used the link list but I still can't seem to get my post to go specifically to that page? Or get the labels to categorize. Any suggestions?

    ReplyDelete
  23. Hi, I've edited my pages menu to show as tabs but is still not showing in my site. Please help.

    Thanks, Meryl

    ReplyDelete
  24. Hi, my pages menu is not showing up in my site. I opted for 'show as tabs' in the pages settings but still nothing. please help.

    Thanks.

    ReplyDelete
  25. Hi there,
    I really want to have pages across the top of my blog, but use my own custom banners that I've created so that they look pretty and match with the rest of my blog.
    Is there a way to add custom artwork to pages?

    ReplyDelete
  26. Thanks so much,very very helpful indeed! :)

    ReplyDelete
  27. Did anyone tell you that you are one butt-kicking, amazing genius! I cannot thank you enough! I've spent all night trying to make my 3 year old blog look a bit more mature (took me over a year to learn how to even add pages!) and it was just an un-organized mess! Anyways, I've been desperately wondering how to add posts to make them appear INSIDE pages forever & you, my friend are my life-saver! Was able to get it right in less than 30 minutes (slow learner over here ) :) Then, I see all this other great, helpful info you have. I adore your page. You are very helpful. Thank you, thank you!

    ReplyDelete
  28. Hi. I have tried this and bottom line, one page works only with one URL (one post). Can you let me know if a group of posts with the same label can be included under one page. Tnx.

    ReplyDelete
  29. Thank you so much for this useful post, this helped me add url based labels to my pages today.

    I have shared on G+ :-)

    ReplyDelete
  30. Hello, Is there any way for the posts not to show as whole article, but just part of it with the sign ''read more'' and a link to go with a click to the actual post.?

    thanks a lot
    :)

    ReplyDelete
  31. when I go in to edit my pages (which I have set up as a tabs gadget under my header) it says I have no pages. But when I am viewing my blog, it is there and i can click the edit to rearrange the order of the link tabs. I used to go to Pages and edit the links - what happened??!!! I need to update an erroneous link address... HELP

    ReplyDelete
  32. I have a page widget just bellow the header on my blog batmanxtra.blogspot.com. It works like a charm on the desktop version but when I go and check the mobile one it has 2 "Home" menus. I just want one!!! Can someone help me out please? Many thanks

    ReplyDelete