25 July 2011

Add any link to Blogger Pages using Blogger in Draft

When ’s redesign launched earlier this month, it was all about the looks; there was no announcement about new features. It seems that, buried under the new interface, some useful new tools have been added anyway, specifically a method for adding any web address to the ‘Pages’ widget. It’s a great and easy way to point to your + profile for example, or to feature some of your labels on the front page. I shared a work-around for this sometime last year and it has proven my most popular article to date, both in terms of comments and of views, so there is clearly a need for it among Blogger users. The procedure is simple enough:

  • On the left sidebar click ‘Pages’, then in the ‘New page’ menu choose ‘Web address’; Blogger in draft add new page from web address
  • Type in a name for the new page and the address below; Blogger in draft add page from web address
  • Click ‘Save arrangement’ and you’re done!

This solution solves the downside of my work-around of not being able to reorder the pages you added this way. Not to mention manually editing your template is usually frowned upon by the Blogger engineers, because it could cause conflicts with future template updates. The only problem I saw so far is that, if you delete the ‘Pages’ widget and later re-add it (to reset any previous changes you made to the HTML code), these manually added web addresses are deleted and you have to input them again. Another good news is that I couldn’t find any limit to the number of links you can add here – as far as I now, Blogger pages should be limited to 10, but after adding 10 web addresses in addition to the pages I already created I received no error.

Personally I am not very fond of the new redesign and I might write wrote an article about the things that keep me from using it on a regular basis, but it’s worth temporarily switching to it for the small benefits it brings.

Update: As a reader noticed in the comments, Blogger changed the page management in the dashboard as of March 2014. Adding pages by URL is a little more complicated now, you need to go to the Layout tab, as explained in the Help section.

73 comments:

  1. Very interesting. I'd like to try this on my health blog. Thanks!

    ReplyDelete
  2. It was a nice work around. I went in to hack the template and put my link in the pages list but it made the resulting tab look funky due to the css of the theme. This way makes it look clean. I didn't know about drafts.blogger.com some if it seems a little cleaner and faster than the other interface some of it seems a little buggy. might get better though. but for this way nicer Thanks
    Ralph

    ReplyDelete
  3. It works beautifully - but I can only get an rss feed to the page I set up with your previous instructions, not with the one I set up in the new draft Blogger.

    Not sure what's going on with this. I'll see if I have to add the html http://exde601e.blogspot.com/2010/09/add-label-specific-feeds-to-blogger.html)you recommended to my template again. Though, if it's not in the template, how come the earlier page works in an rss feed?

    ReplyDelete
  4. I'm not sure what happened there, Brenda, when I look at your blog now none of the pages pointing to labels have the RSS feed of the label. You should try to manually add the code back to the template, it was probably removed when you made some changes. Mine is still working, so I don't think it's related to the changes to Blogger in Draft.

    ReplyDelete
  5. OMG!!! I spent the last two hours trying to figure out the HTML coding from your previous post. It didn't work (no clue what I did wrong...). Was about to give up then I scrolled a bit further down and read your update which led to this page. In 5 minutes I was done!

    Thanks very much for your help! Brilliant!

    ReplyDelete
  6. I tried the way you recommended, it works fine. Still, I have 2 more questions.

    1. I don't want those posts assigned with a particular label (ie. in your case, the assigned label is book) to show on Home page; I want them to show only when viewers click the tab I specifically created for them (ie. in your blog, it is Book Review). Is there any way I could do that?

    2. How could I create those 'Newer Post', 'Home', and 'Older Post' at the page bottom like yours?

    Thanks in advance.

    ReplyDelete
    Replies
    1. I would like an answer to your first question as well. Have you figured out how to do this or does anyone know?

      Delete
  7. Hi, there again. Just want to tell you to disregard my question #2 since I've already got it. However, I'm still in need of a solution for #1. Thanks.

    ReplyDelete
  8. new features are really useful! thank you for the review
    notepad++ download

    ReplyDelete
  9. Hi, tnk293!

    I have also wondered about this. There are some solutions on the web to this problem, for example: Hide Certain Posts from Blogger Homepage. Personally I haven't tested this and I doubt I will ever do that, it seems a little too complicated to me.

    ReplyDelete
  10. I already checked that out but my template codes under the heading are not exactly the same as those shown on that site. So I guess it couldn't work with my blog.

    ReplyDelete
  11. Google+ turned out to be not very popular though
    flash player

    ReplyDelete
  12. Thanks, this is exactly what I needed to know how to do; and I love that it is not necessary to touch the code of the template.
    Peace, Judi

    ReplyDelete
  13. Thank you so much for this post! I followed your original instructions for adding pages in the html code (from over a year ago) but completely forgot how to do it! This feature is wonderful and much easier!

    ReplyDelete
  14. Did this but it's not working... it shows on my editing side that the link is correct but it's not correct on the blog, not sure why.

    Blog is http://sarahandkarl.blogspot.com and I want the Recipes tab to link to http://koepkekitchen.blogspot.com

    Help?

    ReplyDelete
  15. Nevermind... I just switched to uing a Link List instead.

    Thanks.

    ReplyDelete
  16. Great feature. I've used it on my blog that I'm still tweaking and isn't ready yet. The only problem is the box with "show all posts with label 'blog' - show all posts" (but then in Dutch).
    Is there any way to remove this? If you could help me that would be fantastic!

    The page on my blog is: http://blackbirddesign-nl.blogspot.com/search/label/blog

    ReplyDelete
  17. Hi Merel,

    I wanted to describe how to hide that box for some time, so here are the steps in a new blog post: Hide Blogger’s default message box.
    I also applied it to my blog as well for the label Book added to the 'Pages' list.

    ReplyDelete
  18. George-
    I'm still lost on the exact steps to link specific labels to my Pages. I'm very new at this and really want to learn. I'm stumped as to how adding one URL (I don't see where I can add more than one...?) can lead to bringing up all the labels I want that page to forward to. Any help would be greatly appreciated! I would LOVE it if I could get my labels to automatically update wthin the Page. When i go to other people's blogs' and click on say, their Tutorials tab it send me to a result page with a box up top that says "Showing posts with label Tutorials. Show all posts." Please explain how to achieve this, it would make my week, no, year!

    ReplyDelete
    Replies
    1. Hi, Arleene!
      The thing is that you actually are not creating any new Pages or adding labels to existing Pages. What this tip does is to take advantage of a default feature in Blogger: it can filter all the post by a specific label and render them on a different page, such as http://sodarling.blogspot.com/search/label/chairs on one of your blogs - that's why you also see the message on top "Showing posts with label Tutorials. Show all posts". With the tip described above you are only adding this special page to the more visible 'Pages' widget, to feature it for blog readers. As you add new posts under that label, Blogger will automatically updates it, as if does with the home page.

      Delete
  19. I think I'm starting to comprehend. I'm sorry, I must sounds totally pathetic! As a creative person I have no technical sense at all whatsoever. If it isn't too much of a bother, since I assume this is something you must do in your sleep :) could you possibly break it down for me in a few steps?...

    I wan't to make a page/tab that is for Beauty Trends (on myheartistry.com) The one that I have right now I did the long way by manually adding parts from other posts (total fail, I know). I want to convert or re-do that page (and future pages) into this cleaner, more organized, easier format...how would I go about doing that? In super slow late mens terms, haha. It's been a long day.

    You're amazing for even getting back to my question, thanks SO much! The simple answer is practically right at my fingertips, I can feel it. If only I could wrap my clumsy brain around it!

    ReplyDelete
    Replies
    1. Well, I see that you already have the 'Pages' widget active on My|Heartistry, in the sidebar on the right. So you should just follow the instruction aboves; the link to your label-page should be http://www.myheartistry.com/search/label/beauty and type a proper label in the first box, that will show up as the Page name in the widget. If that's not the right address you can go to one of your posts with the label 'Beauty Trends', scroll to the bottom where the labels are listed and click on this label; then copy the address in the resulting page and use it in the Blogger dashboard.
      You can then uncheck the older page from the widget so that it will be hidden on the blog. If you want more similar pages, just repeat the process with another label and they will be added on the live version; you can also rearrange them, etc.
      P.S. if you want to get rid of the message on top "Showing posts with label... you can follow another tutorial I made recently, you can find it here.

      Delete
    2. thank you so much for the detailed answer to this question 'cause I am also hard to understand :/
      I tested what you said here and redesigning my blog tomorrow!

      PS Arleen, no worries! You are not the only one out there as you can understand ;)

      roubalita from http://prettynyummy.blogspot.gr/

      Delete
  20. I figured it out!! so excited, thanks for your help!

    ReplyDelete
  21. omg! thanks so much! I've been finding this all night.. thanks!

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Thank you so much! Found it very useful :)

    ReplyDelete
  24. Thankyou so much for this!

    ReplyDelete
  25. Really useful, thanks!

    ReplyDelete
  26. Thank you so much. I thought there were only coded workarounds and the ones I tried didn't work (maybe because I'm not a coder? :D) anyway, this worked perfectly. Thank you!

    ReplyDelete
  27. thanks so much, really helpful!!!

    ReplyDelete
  28. It was very useful.. thankx!!!

    ReplyDelete
  29. Thank you for the update!! So helpful

    ReplyDelete
  30. Hi, You're post was very helpful to get a customized navigation on labels. I've got another question: You see a way to get a link to the "most poular" blog-posts on my blog? I know the gadget, but what I want is a blogger page just listing the most popular posts, not as gadget. I there also something of a URL Query to get to this posts? Thanks, Andre :)

    ReplyDelete
    Replies
    1. Hi Andre!
      I tried to do that myself at some point, with little success, unfortunately. Since Blogger doesn't have a native way to add gadget into posts or pages, you would have to re-use the JavaScript code behind the Popular Posts gadget in to page somehow and I wasn't able to do that - I'm not that skilled with JavaScript, I'm afraid. I don't think the stats data are available in a Blogger API or variable that can be used to modify the template.
      A work-around would be to create a label for popular posts and add it manually to the posts, then linking to that label page as with any other label but that requires constant rework, so it's far from ideal...

      Delete
  31. I tried at least 20 other sites to figure out how to do this and you are the only one to be able to explain and make it work. Thank you!

    ReplyDelete
  32. I just have a major problem with a class blog that I'm charge: ozarksbackpacknews.blogspot.com

    I had everything working neatly, then added another tab as a web address, and that's when everything got messed up. The worst part is that I haven't been able to go back. I re-do the web addresses of everything and they all say javascript:;

    I need help, please!

    ReplyDelete
    Replies
    1. Hi!
      I'm not sure what happened exactly, I never encountered something like this; could be some sort of Blogger bug. Did you try to remove the 'Pages' widget from the dashboard and re-add it later? That could reset whatever went wrong.
      There was an option somewhere to 'reset widget templates' but I don't remember exactly where...

      Delete
  33. Hi George! Thank you for this very easy to follow instruction. I am having a ton of issues though. I use the http:// link shown to use when adding as I want to create a page just for my poetry to show up on when I post it with that label but it's not working. When I go to click on that link on the pages above it doesn't do anything.

    I'm so confused!

    Kim M.

    ReplyDelete
    Replies
    1. Hi Kim!
      It's definitely a Blogger bug, see Alejandro Cordoba's comment above. I also noticed the problem on my blog now.
      I'll try to report it on the Blogger forum. I hope they will fix it soon...
      My older solution should still work, but it's a little bit more complicated.

      Delete
  34. This works wonderfully, thank you so much, but I was wondering if there is an easy way to not display above the entries the thing that says: SHOWING ENTRIES TAGGED MUSIC. SHOW ALL ENTRIES.

    ReplyDelete
    Replies
    1. Sure there is, I wrote another post about that, check it out here.

      Delete
  35. Thank you SO much for this! Exactly what I needed.

    ReplyDelete
  36. Great tutorials! I tried out the other tutorial for transforming blog labels into pages and left a comment (didn't work for me) so I went back and tried this out, but it's still not working :(. And I find that you can't hide it from the page navigation??? I'm at such a loss so any help you can provide is greatly appreciated! http://theanecdotalbaby.blogspot.com
    ~Melissa

    ReplyDelete
    Replies
    1. Hi Melissa,

      I checked your blog, but I don't see the default Blogger 'Pages' widget anywhere. Both tutorials you read here work only with this built-in widget; if you are using a simple link list on you blog you don't need to go through these steps, you can simply add a new link to the list.

      Delete
    2. After typing this message, I went back and tried a few things and corrected the problem! Thanks for a quick response and the tutorial.

      Delete
  37. Yay, tried to figure out how to add a label page for ages, and now I got it, thank you so much for the useful tutorial!

    ReplyDelete
  38. So, I tried this on a test blog of mine and I have no idea what happened, but now I can no longer use ANY custom templates with that blog. I tried multiple templates and they'll work on my main blog, but the test blog always gets an outrageous error and crashes. :/ I am as little bit bummed because no one else seemed to have this problem on here which means I somehow messed up something. Luckily I didn't ruin my main blog, but it still stinks.

    ReplyDelete
  39. I want to add alphabet labes, so that each label creates a new page with feed like this www.filmiarvustus.eu/search/label/A, but I want to add a sorting, so that each label page would be in alphabetical order.

    Can you help?

    ReplyDelete
    Replies
    1. That seems to be what the Label widget does: you can add the labels A through Z and then create a new Label widget where you choose to display only those labels.

      Delete
    2. Hi George.

      I have a somewhat similar question that I hope you will be able to answer. When I have set up my different pages to display the corresponding labels, is there a way for me to sort the posts that are assigned to the pages? I.e. a page showing labels of "animals" to sort the posts labelled animals in alphabetical order (bird, cat, dog, fish). Right now it seems that the posts are being sorted according to the creation/publishing date, which is not ideal for me, since I would have to manually seperate all my post by faking dates.

      Is there a workaround for this?

      Delete
    3. Hi,

      I guess you want to sort the posts alphabetically by their titles (bird, cat, dog, fish), but as far as I know Blogger doesn't have a built-in option for this. Label pages act like sub-blogs and are ordered reverse-chronologically. There are some widgets you can try that use the Blogger API to change the sorting, but for that you need to create a regular page and add the code there.

      Delete
    4. Hmm, I will have to try that out then. Thank you for your quick reply!

      Delete
  40. Thanks! This was very helpful.

    ReplyDelete
  41. Excellent article add link.

    ReplyDelete
  42. Hi, thank you very much for this helpful site and sorry for my english. I have a question, I'll try to explain myself. When I see posts by labels, the option "older posts" is shown even if there's no more posts to show. So if I click on the link ("older posts") it takes me to a blank page. Do you know how can I fix this? I mean, I want to see the "older posts" link just when it's necessary (not always).

    ReplyDelete
    Replies
    1. Hi! That's an interesting problem, I haven't really though about it before. I'm not sure if it's possible on Blogger, I'll check and get back to you if I find an answer.

      Delete
    2. Thank you very much George! I've searched on the Internet, but my english is poor and it's a very specific problem, I'm not sure if there's an answer. I'll stay tuned :-)

      Delete
    3. Hi again! I looked around the Blogger template a bit, but from what I can tell there's no easy solution to this problem. When displaying the Older links, Blogger checks if there is an 'older posts URL', but doesn't check if the URL will show any posts...
      I found an useful tip on a Blogger forum which might work, I'll try it on my blog first to see if I can get it to work.

      Delete
    4. I've tried it and it doesn't work for me. I'm not sure I understand it, it seems an alternative solution to the problem. If I've understood well, the "Older posts" link appears anyway, but an error message is shown if there are no posts to show. I think I need another kind of solution, just hiding the "Older posts" link if there are no more older posts to show, in the same way the "Newer posts" is no shown at the first page of a category. I just want visitors to be not taken to a 0 result page, but I don't know if it's possible... In any case, thank you very much for your help and time :-)

      Delete
  43. Hi! First off, thanks for all the great tips. I have a question: I'm trying to create a series of tabs to facilitate navigation. These tabs will be partly labels, and partly static pages. I tried using the Page List gadget because of its inherent ability to highlight the tab that the reader is on. The issue I'm facing is that it seems to highlight only tabs linking to static pages and does not highlight the tabs linking to labels. What could I be missing?

    ReplyDelete
    Replies
    1. Hi!
      The problem is that Blogger doesn't add class="selected" to links pointing to labels. Unfortunately I'm not sure why that is. I checked my code for the Pages widget and I didn't made any changes there.
      What's even stranger is that the highlighting works if you add an extra parameter to the link; I changed the template to add ?max-results=7 to each label page to match the number of posts shown on the Home page. And with this change highlighting in the Pages widget works for labels as well... I'll look around to see if I find an explanation for this.

      Delete
    2. Thanks for looking into this: I'll stay tuned.

      Delete
    3. Thanks for this: I'll stay tuned in.

      Delete
    4. Good news: issue resolved. Here's what was happening: the issue was on account of blindly copy/ pasting the page urls. As I'm from India, blogger pages auto redirect to a .in domain extension. Once I changed the extension in the url to .com, everything worked.

      Thanks again for all your help. Cheers!

      Delete
    5. Ah, yes, that can be a pain, I had that problem myself on some occasions. I'm glad it worked!

      Delete
  44. I'm logged in to draft.blogger.com BUT when I create a new page there is no drop down menu and I don't get options for "Blank Page" and "Web Address" as shown in your example above. Does anyone know if something changed or if I need to modify something in my set-up to get these options?

    ReplyDelete
  45. Got this from a support.google.com page--looks like a change from previous design. Go to bottom of article: https://support.google.com/blogger/answer/165955?hl=en&ref_topic=12457


    Create a page linking to an external site

    To create a page that links to a site outside of Blogger:
    Select “Layout” from the drop-down menu of your dashboard.
    A preview of your blog’s layout will appear. Click the “Add a Gadget” link beside the section where you’d like to show your pages.
    Select the “Pages” gadget from the “Add a Gadget” list.
    Click “+Add link page.”
    In the window that opens, fill in the page title and the web address you’d like to redirect readers to when they click on this page.
    Click Save Link.
    You should see the new page listed under “Page Order.” Click Save at the bottom of the gadget window.
    Click Save arrangement in the upper right to save your layout.

    ReplyDelete
    Replies
    1. Yes, Blogger recently changed that part of the dashboard, as announced here: "Making it easier to manage pages on your blog".

      Delete
  46. Wow its so great, tough job is now simplified really great

    ReplyDelete