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.

74 comments:

Vidya Sury said...

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

Khun Rut said...

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

Brenda Clews said...

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?

George B. Moga said...

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.

Asyraf Azizan said...

very helpful

thanks!

FJG said...

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!

Anonymous said...

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.

Anonymous said...

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.

Anonymous said...

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

George B. Moga said...

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.

Anonymous said...

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.

Anonymous said...

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

Judi FitzPatrick said...

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

Brenna said...

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!

Sarah said...

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?

Sarah said...

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

Thanks.

Merel said...

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

George B. Moga said...

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.

Arleene said...

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!

George B. Moga said...

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.

Arleene said...

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!

George B. Moga said...

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.

Arleene said...

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

Diana Jamalal said...

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

Unknown said...
This comment has been removed by the author.
Malin said...

Thank you so much! Found it very useful :)

Anonymous said...

Thankyou so much for this!

Harwinder said...

THANKS!

Anonymous said...

Really useful, thanks!

Anonymous said...

This was so helpful!

Lenka said...

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!

atypicalJen said...

thanks so much, really helpful!!!

Binod Gurung said...

It was very useful.. thankx!!!

*H* said...

Thank you for the update!! So helpful

Unknown said...

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 :)

George B. Moga said...

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...

Unknown said...

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!

Alejandro Cordoba said...

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!

George B. Moga said...

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...

Push-Up's & Pancakes said...

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.

George B. Moga said...

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.

Hard to Live in the City said...

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.

George B. Moga said...

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

Danielle said...

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

Melissa S said...

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

George B. Moga said...

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.

Melissa S said...

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

Unknown said...

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/

Unknown said...

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

friedenlinde said...

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!

Eliz said...

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.

Raiko Puust said...

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?

George B. Moga said...

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.

Anonymous said...

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?

George B. Moga said...

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.

Anonymous said...

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

Unknown said...

Thanks! This was very helpful.

Kelinci said...

Excellent article add link.

Marta said...

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).

George B. Moga said...

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.

Marta said...

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 :-)

George B. Moga said...

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.

Marta said...

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 :-)

Vinit Conrado said...

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?

George B. Moga said...

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.

Vinit Conrado said...

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

Vinit Conrado said...

Thanks for this: I'll stay tuned in.

Vinit Conrado said...

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!

George B. Moga said...

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

Almost Everything Auto Body Repair & Paint said...

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?

Almost Everything Auto Body Repair & Paint said...

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.

George B. Moga said...

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

Unknown said...

Wow its so great, tough job is now simplified really great

Rajesh Kumar said...

This is not currently working with new Blogger update.

Post a Comment