21 April 2010

Transform a Blogger label into a page

Ever since launched the Pages feature, I wanted to add a label to the ‘Pages’ menu, effectively creating a mini-blog with the articles that have a certain label. The native widget doesn’t include this option. I have seen some Blogger-based blogs having something like this, but nobody seems to know exactly how to do it. So I decided to give it a try myself, by looking at the template HTML code.

It turns out that this is not that hard after all. The Pages widget is actually a small piece of code that loops through the static pages you created and generates a list of hyperlinks to them. All you have to do is add your own items to this list and the widget will reflect them accordingly. Of course, this is not limited to my special case of linking to a label; you can add pretty much anything here, for example you can pin a blog article without messing around with its publish date or a link to your Google profile.

As always, make sure to back-up your template before making any changes to it. After that check the box ‘Expand Widget Templates’ to begin editing the full HTML template. Search for the following line that marks the beginning of the ‘Pages’ widget:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>

You can insert your own links after the main code loop closes, that is after the line </b:loop>. For example, to add a label page here you need the following code:

<b:if cond='data:blog.pageTitle == &quot;Fors: Book&quot;'> 
<li class='selected'><a href='http://exde601e.blogspot.com/search/label/Book?max-results=7' title='My book reviews'>Book reviews</a></li>
<b:else/>
<li><a href='http://exde601e.blogspot.com/search/label/Book?max-results=7' title='My book reviews'>Book reviews</a></li>
</b:if>

Naturally, the italicized text should be replaced with your own blog name and labels. And the fragment ?max-results=7 is optional; it just forces Blogger to display only 7 articles for the label, making it consistent with the rest of my blog. You can change the number to anything you like or need.

This code also takes care of highlighting the page title when somebody visits it to closely match the look of a native page. If the template doesn’t use that option, or if you are linking to an external page, you can remove the conditions from this code and simply use a hyperlink inside a list tag. The only thing missing now would be to replace the general RSS feed of the blog with the feed for the label on this sub-page, but I haven’t figured out how to do that for now.

Unfortunately the method described above has a small disadvantage: because of the way the ‘Pages’ widget is built, you can’t add custom links between the regular pages, only before or after them. So if you use this hack on your blog, the manually inserted links will be displayed either on the left or on the right side of the other pages in the widget.

An alternative would be to use the method described here. It uses the standard Blogger feature, so you can place the newly created page anywhere in the widget, but doesn’t show the full articles and requires the use of third-party tools like Google Analytics and FeedBurner.

Update: If you are interested in adding the label-specific feed to this custom page, I discovered in the mean time a method to do this, as described in this follow-up article: How to add label-specific feeds to Blogger.

Update: With the redesign launched for Blogger in Draft, there is now a built-in method to add custom links to the ‘Pages’ widget, without manually editing the template. I described it in a follow-up article and I recommend to use it instead, it makes the process much easier for everyone.

197 comments:

  1. Very helpful, worked fantastically! Thanks!

    ReplyDelete
    Replies
    1. hey are you luke from corroding games?

      Delete
  2. seriously I've searched and searched on how to do this. I knew it was possible just didn't know what the heck I was doing. Thank you so much! Really I want to run around and jump up and down that's how excited I am.

    http://home-momblog.blogspot.com/

    ReplyDelete
  3. Excellent, thanks! :)

    ReplyDelete
  4. I've searched for ages and ages for a tutorial like this and I followed all the instructions but blogger keeps telling me that html is not formed properly. I don;t know anything about html, can you help me fix this?

    Thanks!

    ReplyDelete
  5. Hi Stephanie!
    When Blogger returns errors about HTML, it's usually because some < > parenthesis or tag isn't properly closed.
    If you still have problems, you can contact me through my Google Profile and I can take a look at the code you are trying to change to see if I notice something wrong.

    ReplyDelete
  6. Thank you very much dude. This is a great post. I was looking for the same thing. You're the man !!

    ReplyDelete
  7. Thanks a lot! it works.

    ReplyDelete
  8. Hello,
    Thanks for all these tips !
    One question : how do you do generating TWO pages from TWO labels. I tried duplicating your code the second beneath the first... but it doesn't work... : http://lecomptoirdelaprospective.blogspot.com/search/label/G%C3%A9ographie%20du%20Futur?max-results=7

    ReplyDelete
  9. Hi, Olivier!
    A second page should definitely work with this method. I have tried it myself and encountered no problems.
    Make sure the code is located between the "< /b:loop >" ending the normal Pages and the "< /ul >"-tag that closes the widget.
    Do you receive some sort or error message from the blog editor?

    ReplyDelete
  10. I got the trouble : the french sentence "Le bureau d'étude" wich must be understood as one sentence... a clue ???

    ReplyDelete
  11. Try using & # 39 ; (without the spaces) instead of the apostrophe, like this:
    Le bureau d'étude.
    Blogger doesn't like these characters in names because they conflict with the coding conventions.

    ReplyDelete
  12. I just discaded the ' ! It's more simple... Thanks a lot for your advices...

    ReplyDelete
  13. Actually, I just added a bulleted list and placed it in the navigation widget section on the dashboard instead of using the auto page linking system.

    ReplyDelete
  14. That'as awesome!! Thanks a ton!

    ReplyDelete
  15. I tried adding the above mentioned code in the right section of the template, but the only result I get it's that all the Pages widget doesn't get displayed anymore. Any suggest????

    ReplyDelete
  16. Hi Gabriele!
    Can you share the exact code in your template that causes the problem?
    I have just tried to move the 'Pages' widget on my blog to the right sidebar and it works correctly.

    ReplyDelete
  17. Thanks a lot. After two hours of failed attempts, I found your post and things went smoothly.

    ReplyDelete
  18. Thank you SO much! This helped wonderfully and worked like a charm. Awesome!

    ReplyDelete
  19. Wow, thanks so much! Your advice was clear and I easily made the tweak on my blog, news.AmericasHCG.com. It works like a charm.

    Thanks again!

    ReplyDelete
  20. Thanks for the post! I've been trying to figure this out for months!

    ReplyDelete
  21. Pretty much copy pasted the code you gave, and simply replaced your blog's title and links with mine, but I'm repeatedly getting this error:
    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "http:" must be followed by either attribute specifications, ">" or "/>"."

    I know next to nothing about HTML, so any help you could give would be great!

    ReplyDelete
  22. Hi, a traveller,

    If you copied exactly the code in my article, there shouldn't be any problems. Maybe you deleted some of the special characters when you replaced my blog address with yours (the quotes surrounding the URL for example).

    Another cause for error could be if you pasted the code inside another pair or tags, so the opening < > doesn't match the closing < /> anymore.

    ReplyDelete
  23. Hi-- I have a question about whether or not this suggestion will work if I've already created static pages. Let me start at the beginning to be clear.

    I'm a writer so I want my blog to have a menu bar at the top with tabs for each of the topic I write about: sports, politics, etcetera.

    I created static pages called Sports, Politics, Etcetera (and a few others but you get the idea).

    My plan was to post all of my writing on the main page, regardless of topic, but to use a post label (for example, sports) to link to my Sports static page. That way, people who are only interested in reading about sports can click on the menu tab and read only my posts about sports without having to scroll through posts about other stuff.

    With all of that said, is what you're suggesting going to work for me or do I have to delete the static pages I created? thanks! kelly

    ReplyDelete
  24. Hi Kelly!
    This is actually very similar to how I use my blog and one of the reasons I searched for the solution described in the article.
    To keep it short, you don't have to delete your static pages, they can work alongside the 'label-pages'. I have them set up this way on this blog as well. The only limitation is that the label you add manually to the widget will always be located on one side of the native pages, you can't alternate them.
    The Blogger widget for Pages also allows you to hide static pages, so if you want to remove some of them from the blog, you can simply hide them instead of deleting their contents entirely. Later, if you change your mind, they can be easily re-enabled.

    ReplyDelete
  25. disregard! I got it to work!!

    ReplyDelete
  26. THANK YOU! This was most helpful! Thanks!

    ReplyDelete
  27. Hi, went back and tried again, and it worked this time round! Thanks! :D

    ReplyDelete
  28. Just want to thank you for the instructions on how to do this! You rule!

    ReplyDelete
  29. this is what i'm looking for!

    do you think it's possible to control where to add them by editing the html inside the pages instead?

    ReplyDelete
  30. Hi, kelvs!
    I'm pretty sure editing the pages is not the solution, because the location of pages is controlled by the blog template, not by the contents of the page.
    Maybe there is a way to change the order of pages, but unfortunately I haven't figured it out.

    ReplyDelete
  31. Hi... Thanks for posting this information. It worked for me! (I created label links for my bf's dad's blog...www.electrodefog.com). I also created custom links, which took lots of trial and error (this stuff isn't my forte!), but I finally got it. I'm glad to have come across your site. Thanks again. Elizabeth

    ReplyDelete
  32. I'm glad you found my post useful, Elizabeth. I do most of the customization stuff through trial and error as well.
    The design of that blog look great, btw! You could hardly guess it's based on Blogger.
    You could also use web fonts to replace the image anchors with text, there are many articles about this online: "How to use Google's Font API with Blogger".

    ReplyDelete
  33. This is just what I have been looking for- thank you! However- when I did this, it worked and added the page, and then said it could not find any posts with the label. I checked and there are 40 posts with that label. Also, I have the link list on the sidebar already. So why isn't the new label page finding them? Thanks for any help!!

    ReplyDelete
  34. Hi, Mary!
    I think I know what the problem is: in the page you used 'Photography', with a capital P in the URL, but your actual label on the blog is spelled 'photography', in lower case. I newer thought this would make a difference, but try it out, I'm pretty sure it will fix it for you.

    ReplyDelete
  35. I never thought of that either, but I changed it to lower case, and it worked! Now the page link is also lower case, but I know I can go back and change the labels now. Thank you so much!!

    ReplyDelete
  36. I get this error message:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    I followed your instructions.

    To arrange the order of your pages you go to Design, then Page Element(Edit Layout), then edit pages. The Configure Page List shows up, just drag the pages in the order you want them.

    ReplyDelete
  37. Thanks for sharing...


    http://urlheaven.blogspot.com/
    http://luv-pakistan.blogspot.com/
    http://theconcert-hall.blogspot.com/

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

    ReplyDelete
  39. Hi, I just tried this and it ended up not allowing any of my "page" titles to show at all on my home page, even after trying to edit the pages and re-confirm that I wanted them showing! That's all it did. I'm such a beginner at this I'm sure I did something wrong, but what should I do?

    I'd like to allow posts with a certain label to go directly to a page I've created. I'm also wondering if when I filled in my details in place of yours, if I filled it in wrong. For some reason, the title of my page, Behind the Scenes, is different than the name on the address, which says photo-diary (probably because that was the original title of the page). So which name do I use when I'm editing the template?

    Thanks!

    ReplyDelete
  40. Hi Gabrielle!
    Can you post a link to your blog, so that I can see the result and possibly the code behind it? I can't seem to access your Blogger profile.

    ReplyDelete
  41. Oh thanks for the quick reply. The link is...

    http://makinglifebeautifultoday.blogspot.com

    I will tell you that after that I went back to the html template and reverted back to the default, so I don't think you will be able to see what I did! Sorry! I told you, I'm new at this! I've had a blog for several years but am just now starting to try to get creative with it.

    ReplyDelete
  42. You're right, now I can no longer see the changes you made.
    If you have more questions, feel free to post them here, I'll help in any way that I can.

    ReplyDelete
  43. Okay, so I did it again, this time using the "page" name in the address for Behind the Scenes which is photo-diary...it did the same thing. My pages are gone from the home page, although I can get to the gadget and everything. What to do, what to do.

    Is there any spacing or tabbing I should know about? Man, I'm wishing I paid more attention in my old-school computer classes! Also, is there a specific way the lines should show up in the html? They don't copy and paste in the exact way yours is on you tutorial. And I'm wondering if I have the order of the page to label backwards...this is so foreign to me, but I want to figure it out!

    ReplyDelete
  44. Hi again Gabrielle!
    I'm not sure what happened, but looking at the page source, the tabs widget is missing from the HTML code. Perhaps you overwrote the code for it in the template - the portion that starts with < b:widget.
    Try to reset the template once again and reapply the changes. make sure nothing from the original lines of code is deleted. I usually add a couple of line breaks before pasting new code to make sure I get the location right and I don't remove anything useful.
    The final code should look roughly like this:

    < b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
    < b:includable id='main'>

    < div class='widget-content'>
    < ul>
    < b:loop values='data:links' var='link'>
    [...]
    < /b:loop>

    [My custom code here]
    < /ul>
    < b:include name='quickedit'/>
    < /div>
    < /b:includable>
    < /b:widget>

    Hope this helps!

    ReplyDelete
  45. Okay, thanks for all this help! So, after several tries, it worked...sort of, except now I have 2 tabs called Behind the Scenes. One of them is the normal pages page, the other one is the new improved pages page that says at the top of it that it will upload any posts with that label. So now what do I do?

    Thanks so much, again!

    ReplyDelete
  46. Hi,
    Well I figured out how to hide the original page. I'm wondering however, if there's any way to get this new page not to look like a label page; for instance, not to have that little box at the top that tells you about the posts and older posts. Thanks sooo much!

    ReplyDelete
  47. That's a very good idea, Gabrielle!
    I thinks it's doable, not very easy, but doable. I'll do some experimenting on my blog and let you know how it works. Probably will even write another follow-up article to this one.

    ReplyDelete
  48. Thank you SO much! This looks so good on my blog, I am so pleased with how it turned out!

    Exactly what I've been trying to figure out/looking for FOREVER!
    Thanks again!

    Hannah
    www.photographybliss.blogspot.com

    ReplyDelete
  49. Hi

    Sorry, I'm finding this a bit confusing to follow and not sure what code I'm supposed to be adding to what parts, or even if this is what I'm trying to look for - I want a particular label on my label cloud to point to a static page on my site, rather than bringing up all the posts with that label - which links do I add into the italicised code you mark above? Is this what it does?

    And sorry if this is a really stupid question but I didn't even understand what I'm supposed to be inbetween the '&quot' bits about the page title...?

    Thanks in advance for your help!

    ReplyDelete
  50. Hi!
    No, this code does the opposite: you can feature a label in the 'Pages' tab just like a static page.
    What you describe should also be possible, but it would require other coding and editing another section of the Blogger template.

    ReplyDelete
  51. You have no idea how helpful this is! It's just brilliant. Thank you!

    ReplyDelete
  52. Any possible help would be appreciated. I posted the code, added in my information and ended up with a Page that was...my original blog, not the label page I was looking for. Could you possibly help?
    I'm trying to get a page of only labeled BIWAM posts. Thank you!

    http://themompetition.com

    ReplyDelete
  53. Hi!
    I checked your site and it seems to be working fine. If you click on the 'BIWAM' link you will be directed to the label page with the address http://www.themompetition.com/search/label/BIWAM
    Are you seeing something else?

    ReplyDelete
  54. Well I found a widget that would allow me to put labels as individual pages...however, I can't combine these widget generated pages with my already established Pages. As you can see, I have two rows now. Any suggestions?
    THANK YOU for your help!!

    ReplyDelete
  55. well, it looks like you added another copy of the 'Labels' widget in the 'Tabs' section.
    Adding links to Label-pages next to normal pages is the whole purpose of my article. You should try it out again - as you can see from the comments and my own blog, it works pretty well. The only difference should be the link address - for example
    http://www.themompetition.com/search/label/BIWAM
    instead of
    http://exde601e.blogspot.com/search/label/Book

    ReplyDelete
  56. I did try it again. And you know what? It worked. I have no idea what happened last night but I spent over 2 hours on it and it would not go through correctly. Perhaps it was because I was on my 3rd glass of wine. Thank you for you help and advice and I'm sorry because I feel like I've wasted your time. Cheers.

    ReplyDelete
  57. Don't mention it!
    I'm glad it worked out for you.

    ReplyDelete
  58. Hi George, Very nice. I've used Label links for top navigation tabs for a while. But when I noticed that Pages also show up like top navigation tabs in Blogger's new Mobile template, I wanted that functionality too. That's when I found this article. Your Home and mBlogging show up on my phone, but the Book Reviews label link doesn't. This would be totally awesome if you could make the results of your Book Reviews label link show up on my mobile phone too.

    ReplyDelete
  59. you saved me so much time & energy with this information. your instructions are fantastic. all the best!

    ReplyDelete
  60. i have a page named 'tomader golpo' i want to enabling post in their but when i did your way , another page added as same name tomader golpo, so its look double page.... what can i do?

    ReplyDelete
  61. Hi, Corl!
    I checked the Blogger template right after enabling the mobile version, but I didn't find any new code I could customize to enable this solution for mobile as well. My guess is Blogger simply ignores widget customizations on the mobile site. Maybe they will allow some more control over the mobile layout in the future.

    Hi Asad!
    I'm not sure what you mean, I didn't see any duplicate pages on your blog - maybe you already removed them. In any case, if you have a page 'tomader golpo' as well as a label 'tomader golpo' and add the label as I described, they will both show up. You can go to the Page widget settings and uncheck the Page 'tomader golpo' if you decide the label is better.

    ReplyDelete
  62. i only can create many post in my home page. is there any way to create many post in other pages also? [if you go the page 'story books' you will see i added all things in one post and it maybe hard for some user to scroll down n down to see all things ] plz help me

    ReplyDelete
  63. Sorry, Blogger doesn't support creating posts on pages. Any articles you publish are added to the 'Home' stream. Pages are meant to be static, like for example an 'About' page. That's part of the reason I use the solution described above to create a partial blog from a label. Pages can't to that.

    ReplyDelete
  64. hmm. thx ..but if i change my domain to only .com can i able to do that?

    ReplyDelete
  65. Hi George,

    Thank you for this solution, it helps me add the Label Links to the Page Links widget, and that lets me style them in Template Designer.

    With a deeper understanding of Pages, I see the new Mobile template is very anemic. It's better to use my regular template on mobile devices because it's fully customizable.

    Thanks so much,
    Corl

    ReplyDelete
  66. I have created a blog based on Linux education check this ::

    http://linux-rhcsa-rhce.blogspot.com

    ReplyDelete
  67. Dziękuję bardzo ! Działa !

    Thank you very much! It works!

    maciejslowinski.pl

    ReplyDelete
  68. Thanks for this code, but it is not working for me, i keep getting this message;
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The value of attribute "title" associated with an element type "null" must not contain the '<' character.

    ReplyDelete
  69. You probably inserted a '<' character at the wrong place in the code. You should check again if all the < & > brackets are paired up properly.

    ReplyDelete
  70. Hi George

    I have tried using your script on my blog and it works perfectly when I retain your blog information, but doesn't for mine. I am pretty sure this is because i have two-three word labels like 'Matter of Fact' or 'Something Interesting'. When I preview the template I see nothing for labels from my blog - but your 'book review' thing shows up fine. Wonder if you can help me out with this.

    Thanks a ton!
    Rabia

    ReplyDelete
  71. Hi Rabia,
    I think you already figured it out, the links are working now on your blog. Basically when the labels have multiple words you should replace the spaces with %20 to have an unbroken string. Or simply visit the label page on the blog and copy the URL from the address bar of the browser.

    ReplyDelete
  72. Thanks a lot for replying so quickly! Yes, I was able to figure it out. Saw another post online that suggested I add a link list of my label feeds right after the tag. This seems to working fine as well although I have no idea what the advantages/disadvantages of this method might be.

    Thanks again!

    ReplyDelete
  73. This worked great, however, it doesn't show up in the "pages" gadget. Thus, I can't figure out how to order my list of different pages. (It shows up at the end of my list).

    ReplyDelete
  74. Hi, SG!
    As I mentioned in the article, adding the manual links is limited to before or after the regular pages you display.
    Being a manual change to the official gadget, it will also not reflect in the blog admin interface.

    ReplyDelete
  75. Hi!

    I am trying really hard to understand this, and I went through the steps and added a page at the end of my pages gadget, but that created page is unclickable. What I want to do is just have a page that links to posts with a specific label, and I am sure that is what this is for, but I can't figure it out! It created the page, but it won't let me click on it...

    ReplyDelete
  76. Hi, Brenna!
    I'm assuming you're referring to this blog: http://bthefashion.blogspot.com/
    As far as I can tell, the problem is not related to these changes, instead it comes from the Blogger template itself. There is a transparent element that overlays your last link 'Contact' and prevents the user from clicking it.
    I would recommend you to add the following CSS code in the template, somewhere in the section dedicated to styling, link after the comment /* Content */

    .cap-left { height: 0px; !important }

    This should make the obstructing element effectively disappear from the blog and restore the links in the Pages widget.
    Please let me know if this works out for you.

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

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

    ReplyDelete
  79. Excellent! Works like a charm, thanks!

    ReplyDelete
  80. Hi! Thank you so much for the code.

    I haven't used Blogger for a while after being on Wordpress but your tutorial helped me get children's books blog look more organized :)

    ReplyDelete
  81. This is amazing man...

    http://funstufforall.blogspot.com/

    ReplyDelete
  82. wow thank you very much....exactly what I needed

    ReplyDelete
  83. how can i change the font for my page icons???? any help?

    ReplyDelete
  84. Hi Bebe B!
    The font for the 'Pages' tabs can be changed from the Blogger dashboard: go to 'Design' > 'Template Designer' > 'Advanced' > 'Tabs Text'. The selection is now pretty big, since Blogger also introduces web fonts as an option.

    ReplyDelete
  85. thank u! i really appreciate your help here.
    initially i had issues when i didnt put the last ? behind the url... but then after typing it in, it works so well. im really glad to have found this solution :)

    ReplyDelete
  86. Hi, thanks I've been looking for this tutorial, however I still couldn't transform the label into pages they said the xml parse came out wrong :(

    I couldn't find the tag after


    instead I found

    should I delete the or what? thanks in advance :-)

    ReplyDelete
  87. Hi, thanks I've been looking for this tutorial, however I still couldn't transform the label into pages they said the xml parse came out wrong :(

    I couldn't find the tag [/b:loop] after

    [b:widget id='PageList1' locked='false' title='Pages' type='PageList']

    instead I found
    [/b:section]

    should I delete the [/b:section] or what? thanks in advance :-)

    ReplyDelete
  88. Hi, Anonymous,

    you need to check 'Expand Widget Templates' above the code edit box, otherwise you will not see the code you need to change. The < b:section > component is only a placeholder for the widget, the full code is only revealed with 'Expand Widget Templates' on.

    ReplyDelete
  89. Hi there! First off: AMAZING tutorial! I believe it's the only working one online! I've search for days on how to do this. BUT, I have a problem. I made a label called recipes, and as grew into blogging I never never really did posts about this subject. Now I want to remove the label but I always get errors. Most of the time it says the closing tags aren't there. I don't really understand where this problem comes from, 'cause the end tags are not situated in the part of the code that I deleted... can you help me with this issue? You can always reach me by mail: gohomemydear@gmail.com

    thank you!

    xx

    ReplyDelete
  90. Hi George,

    Thank you so much for sharing this tutorial. I can see by the comments that it has helped so many people! It makes me think that I should be able to do this, but after working on it all day, it is still not listing the label "photos" that I'm trying to make into a page.

    Looking through the comments, I have done some trouble shooting by checking the end tags as well as the url. If you have the time for some feedback, I'd really appreciate it!

    Thank you so much,
    Tanya

    ReplyDelete
  91. Hi Tanya,

    Could you share the address of your blog or the errors you are receiving - if any? This way I could maybe check what happened and I'll try my best to help you out.

    Thanks,
    George

    ReplyDelete
  92. I'm really new to all of this, but trying to do what you said and I can find the "b loop" listed anywhere to know where to start the print that you mentioned above....am I missing something?
    Thanks!

    ReplyDelete
  93. As mentioned before in the comments, and in the article, you need to check 'Expand Widget Templates' above the code edit box, otherwise you will not see this code.

    ReplyDelete
  94. Thank you for the great tutorial.

    One question: is there any way to move these linked pages within the widget (i.e. reorder)?

    Current my widget read left to right: home, about me, inspiring me, contact, think, grow, create.

    I would like it to read: home, about me, think, grow, create, inspiring me, contact.

    Does it matter where I past the code to get a better order?

    Thank you.

    ReplyDelete
  95. Hi, Jane!

    Unfortunately you can't alternate between the default Blogger pages and these "custom" pages - at least not easily. The widget is built with a code loop and there's no way to break it to add links to labels, like described above. You can only paste the code after the regular widget or before it.

    A workaround would be to do the following:
    1. un-select some pages from the 'Pages' dashboard (in your case 'inspiring me' and 'contact'), so that they don't appear in the default widget.
    2. add them again manually, by repeating the code above, but using the URL of each page ('inspiring me' and 'contact').
    The result would be:
    - "home, about me" from the widget
    - "think, grow, create" label pages added manually
    - "inspiring me, contact" normal pages, but added manually

    Hope this helps!
    George

    ReplyDelete
  96. Thank you for the advice George.

    I've complete step 1 and began step 2 with the "Inspiring Me" page.

    It looks beautifully on the home page: http://clipstickjane.blogspot.com/ but when you click on 'Inspiring Me' you get this:

    Page not found
    Sorry, the page you were looking for in the blog C. Lipstick Jane does not exist.

    **Forgive the novice attempts**

    This is code I've used: OK I tried to publish this comment with the code & blogger won't let me. At any rate, I used your guide & changed books to Inspiring me & your URL to http://clipstickjane.blogspot.com/Inspiring Me

    Question: Do I need to have content ready to populate the page? Do I create a page or a post? If so, where do I place it in the code?

    Thank you.

    ReplyDelete
  97. From what I saw on your blog earlier, "Inspiring Me" & "Contact" are regular pages on your blog, not labels. As such, they have different URLs, in the format: http://clipstickjane.blogspot.com/p/[page name].html, e.g. http://clipstickjane.blogspot.com/p/contact.html. This address should work in the code.
    I'm not sure what the URL of the other page is, but you can try to bring it back in the regular 'Pages' widget, open up the blog, copy the address of "Inspiring Me" and paste it later when you edit the template.

    ReplyDelete
  98. Thank you for all of your help. It works great!!!

    ReplyDelete
  99. This is what I am searching for. Thanks so much for this awesome post. This way is much effective than creating a navigation bar. Thanks again!

    ReplyDelete
  100. hi,
    first of all great article! it worked fine with me, but i still have a problem; for some reason, when i click on any of the new label pages, the page name in the menu is not selected.
    i tried to figure out what the problem might be but i still can't find a solution.

    may you have any idea?

    ReplyDelete
  101. Hi, Stefano!

    The code should work in this form to show the selected pages on the widget, if you added the if/else/endif decision as described above. The only problem I can see with it is if the condition doesn't exactly match the page title on the blog.

    You could try an alternate condition, in the form (without the spaces - I added them so that Blogger doesn't convert the quot expression to actual quotes, they don't work directly in the template):

    < b:if cond='data:blog.searchLabel == & quot ;character design& quot ;' >

    This depends only on the name of the label you are trying to add to the widget, and as such should be less error-prone.

    Please let me know if this works!

    ReplyDelete
  102. @gxg

    man, it works perfectly now! changing that variable in the condition made the job!

    thanks a bunch!! ;)

    ReplyDelete
  103. can you PLEASE email me at blackmon.lindsay@gmail.com! i'm having some issues with my blog:

    www.lindsaydaniellephotography.blogspot.com

    thanks!!

    ReplyDelete
  104. hi,
    below link copy paste your writing to his blog, i think it's kind of unfair

    http://diggizone.blogspot.com/2010/08/mengubah-label-blogger-menjadi-page.html

    ReplyDelete
  105. Thank you, thank you... : )
    It looks awesome! : )

    ReplyDelete
  106. This problem was haunting me for a very longtime,as I have some very good articles[from my perspective],in my pages section.And I'm not into the technical side of the Computer Software or Hardware.
    I solved it,in the following way:-
    1.Started a new post.
    2.Mentioned almost all the tags I wanted in the pages section,in this post,asking the visitor to view the PAGES section.
    3.Added all the tags,to the tags box, of this post.

    ReplyDelete
  107. i tried this and it works but it's posting two links to the page i created and i can't seem to figure out how to fix it.

    ReplyDelete
  108. hye i dont know how to change the the code u gave for my blog.. can u help me??
    i found the line
    can u change the code to my blog??
    my lable address is http://tamilhotblog.co.cc/search/label/HOT%20Videos and my label name is HOT Videos and i need to link this label to page name Hot videos. can change the code to my blog?? my id ravijhss@gmail.com

    ReplyDelete
  109. Thanx. Its worth 1000s of dollars info.

    I'm linking your blog to my blog, plz link back asap. Thanx again

    ReplyDelete
  110. Hey there!

    I tried to do this for my blog threeblackbooks.blogspot.com for the labels "Collections" and "Creative writing" and entered the following:

    replacing Fors: Book"' by Fors: Collections"'

    replacing the links with
    http://threeblackbooks.blogspot.com/search/label/Collections?max-results=7'

    replacing "Book Reviews" by "Collections"

    However, nothing appears under my pages tabs when I go back on my home page. I put this in between the commands you indicated. Am I doing anything wrong?

    Thanks for your help!!

    ReplyDelete
  111. Hi, A.S.B.!

    I see the links on your blog are working fine now, so I guess you figured it out for yourself.
    Thanks for stopping by!

    P.S. one last thing: 'Fors' is the name of my blog, so you should replace that with your own names/labels as well.

    ReplyDelete
  112. hi. i can't seem to get this to work my blog is http://jeanlittlethings.blogspot.com/

    and i'm trying to get all things labeled 'the best of louisville' directed to the page 'the best of louisville' what am i doing wrong? thanks!

    ReplyDelete
  113. Hi, Jean!

    Unfortunately you can't redirect blog posts under a regular page, like you have for 'the best of louisville'. With the tip above you can create a 'virtual' page with all the articles under that label, in order to add it to the 'Pages' widget. If you are not using the widget you can just use a link to the label page directly, like so: http://jeanlittlethings.blogspot.com/search/label/the%20best%20of%20louisville

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

    ReplyDelete
  115. Hi everyone.Looks quite interesting page here.
    I am a little confused,basically i am not sure that this is the right place for my question,since i am a very new blogger.
    I wanted to add a bar at the top of my page,to help my friends quickly redirect to certain subjects,like ''movies,music etc''.
    Firstly a gave a try to the ''pages'' application,but it wouldn't work,so i am now using the labels application which is automatically redirecting my posts according to my labels.
    I did it pretty well and now i have different categories while my posts are moving on their own to the certain label buttons.
    What i can not do is to create a ''HOME'' label,so while clicking on it should direct you to the first page of the blog.Do i have to mannually alter label;s url???
    Please can someone give me the instructions how to change a label url so when clicking on a ''home'' label it would redirect you to the url of my choice??(first page)
    i'd be grateful

    ReplyDelete
  116. Hi, Anonymous,

    The 'Pages' widget in Blogger has a built in link for the 'Home' page and it's also where you can add several links to the labels as described in my article above.

    ReplyDelete
  117. It's not working for me. I copy'd the exact code on the right place in the html template but there's nothing happening. I've replaced the links with my own.

    Should this create a new page on my page tab or should i do that myself???

    Thank you!!!

    ReplyDelete
  118. Hi Timothy!

    The tip should create a new page in the page tab on it's own, there i no need to create a separate page manually.
    It's hard to say why it's not working for you... did you check the box ‘Expand Widget Templates’ before making changes to the template?

    It would probably be easier to use the updated Blogger interface, because there is now a way to add any address to 'Pages', including internal links to blog labels or even individual articles, like i explained in this post: Add any link to Blogger Pages using Blogger in Draft.

    Hope this works for you!

    P.S. love the name of your blog! :)

    ReplyDelete
  119. Thanks for posting! However I am having a problem still with it linking to my page. Please email me at linzborg{@}gmail{dot}com of you are possibly able to help!

    ReplyDelete
  120. don't work
    http://vipaddress.blogspot.com

    ReplyDelete
  121. Thank you, its work!

    http://moch84bdg.blogspot.com

    ReplyDelete
  122. Used to use your code... But can't find the 'insert line refece code' () in the html code of the new blogger website I want to create... Hints ?
    Thanks a lot for the work and the tips !

    ReplyDelete
    Replies
    1. Do you use the dynamic templates for the new website? Their template structure is completely different and probably don't support many of the manual customization people have been creating for Blogger for years.
      In any case, you should try to use the default Blogger tools for custom links, they have been added some time ago in the new-style dashboard, as I described in another article here. Good luck!

      Delete
  123. Hi George, i been searching for many months (and i mean it) on how to add the 'title' attribute to the pages gadget but noone cld come up with anything, not even the mighty Greenlava at BloggerSentral in whom i'd depended on for guidance on template customizations for long time.
    I became depressed...I was so depressed abt this till few days ago when i ran into your blog while surfing. Boy! Ur post is simple yet so super super. U got yourself one new loyal reader, and am bookmarking ur site ryt away. Besides, i'll be visiting often. Gracias Amigo!!

    ReplyDelete
    Replies
    1. Hi!

      I'm glad the article was helpful! I have some other Blogger articles in preparation, but I'm currently away in a business trip and the blog has become a little neglected...

      Thanks for reading,
      George

      Delete
  124. I have been searching for a way to do this for so long...thank you so much for posting this article! Extremelyyy helpful!

    ReplyDelete
  125. I successfully added pages but I want to remove this message

    Showing posts with label general knowledge. Show all posts
    how can hide this message

    ReplyDelete
    Replies
    1. I have another post covering this, you can see the solution I found here.

      Delete
    2. hello, i am trying to perform these methods but not working or I am doing sth wrong. to start from proble: I would like to make every tab in the horizontal pages up in my blogger open a new page that has the posts that are labeled likewise. I tried a method that depends on creating a Links List (from adding gadgets in Layout) and then connecting the pages URLS with Labels, eg, URL of the page or tab/search/label/your label and it didn't work. please help!

      Delete
    3. Hi Suzan,
      Could you please be more specific? Have you tried the method in my article or something else entirely?

      Delete
  126. Ok, any help is GREATLY appreciated! I had to add the code you sited as a response to one of the commenters due to the fact that my blog design didn't have it, then I followed everything else, but when I click on the "Love" think in my side bar it takes me to the page, but doesn't show any posts. I'm thinking I added the code in the wrong place on the CSS??? I made sure all posts had the 'love' label that I used in the code you wrote. I'm at a loss :/... TIA!... http://theanecdotalbaby.blogspot.com

    ReplyDelete
  127. Hi how do I search for multiple labels

    ReplyDelete
    Replies
    1. Hi! Depends on what you need exactly: if you want to search by either of the two labels, I don't think it's currently possible; if you want to find posts with several labels you can add them in the URL separated by a + sign, like this: http://exde601e.blogspot.com/search/label/Links+Updates
      Or alternatively you can use the search function with an URL like this: http://exde601e.blogspot.com/search/?q=label:Chrome+label:Updates

      Delete
  128. how do you sort the pages? so that the label page will show on the second row from the left? just like your book review did

    ReplyDelete
    Replies
    1. Hi,
      As I mentioned in the blog post, that's not possible with this solution. However, Blogger later introduced a native method to add any sort of link to the 'Pages' widget, as I described in a follow-up article here. Hope this helps!

      Delete
    2. Thanks!!! it really helps

      Delete
  129. Thank you so much, George. God bless you!

    ReplyDelete
  130. Help me, I went to the Edit HTML part but can't find an 'Expand Widgets Template' button.

    ReplyDelete
    Replies
    1. Blogger changed the HTML editing options since I wrote this article. Now you need to go to Template > Edit HTML > Jump to Widget > PageList1 and expand the small arrow on the left.

      Delete
  131. Nice Post, i did this on my blog, i was wondering is there a way to change the url structure of search/label .... to anything i desire?

    ReplyDelete
    Replies
    1. No, unfortunately not. This is the standard structure Blogger uses and I haven't heard of any way to change it.

      Delete
  132. How do I create a label when it was sticky about how white space and replace that lost by the "-"
    example:
    http://gamesnewss.blogspot.com/search/label/chess% 20information
    Replace the url: http://gamesnewss.blogspot.com/search/label/chess-information

    ReplyDelete
  133. Dude Can you Tell me How to Change the Title of a label page

    For Example: http://exde601e.blogspot.in/search/label/Blogger?max-results=7

    Seo Title of this Link is Fors: Blogger

    Can we edit this??

    ReplyDelete
    Replies
    1. Of course, there are a number of articles online explaining how to do this, for example: How to Customize the Blogger Page Title.

      Delete
  134. how can show a specific label posts in a blogger page as a list

    ReplyDelete
    Replies
    1. I'm not sure what you mean... could you be more specific please?

      Delete
  135. Very nice guide,thanks for sharing.

    ReplyDelete
  136. Hi!! Hoping you can advise me! I am a new blogger who spent ages making labels for posts and what happens? I do a blogname/search/label search because my labels weren't searchable and - voila - nothing happens. It's like I never made them. How do I fix this problem?? they show up on posts, they really seem to be there and yet ... totally dysfunctional. I create search widgets from scratch and the only posts that come up under a label search is whenn the label is in the name. How do I correct this, do you know? I checked everywhere on the internet for help and can't find any. Wondering if you can message me back if you have any ideas! So sorry to bother you but I have multiple herniated discs in the neck and the faster and most efficiently I can find info, the better off I am. Thank you so much for sharing this info! (I can be reached at divinelovenotes@gmail.com). PS my blog name is divinelymanifest.blogspot.com. Maybe it's the template I am using?? I have no customizations to HTML either and didn't limit searching or tagging or finding the blog in any way and yes the labels show up on newsfeed. It's so weird!

    ReplyDelete
    Replies
    1. Hi! I"m not sure I understood the problem, from what I can see the labels are working just fine on your blog.

      Delete
  137. Thanks admin for this post but please from next time give screenshot or a live demo because we want to see a preview before adding anything to our blog.

    ReplyDelete
  138. Very useful trick for adding labels as menu option list. Thank you for sharing.

    ReplyDelete
  139. Hey, may I know how to remove the label "in ..." from my blog pages? They are there ever since I installed a new skin and I have no idea how to remove them!

    i.e.

    http://www.art-xy.com/p/batik-lights.html

    Thank you!

    ReplyDelete
    Replies
    1. It should be possible, but you need to edit your template manually. I'm not sure I can help without access to the template, because it looks to me that it's highly customized and possibly not using Blogger standard fields.

      Delete
  140. Would you mind looking at the XML file, please, then advise me??

    I've been hunting around for the code that I should remove/edit but can't seem to find it...

    Please???

    ReplyDelete
    Replies
    1. Sure! can you upload it somewhere and send me a link?

      Delete
    2. https://www.dropbox.com/s/b1o5963vpde9jlk/template-2767004615294110945%281%29.xml

      here's the link, thanks!!!

      Delete
    3. Hi,
      It should be easy to fix, the labels in this template have a 'meta' class. Search in the XML file for this block of code (without the spaces):

      < p class='meta' > ... < /p >

      and add the following code around it (again without the spaces, Blogger doesn't allow code in the comments otherwise):

      < b:if cond='data:post.labels' >
      < p class='meta' > ... < /p > < /b:if >

      This checks if the post has any labels and hides the label box if there aren't any.

      Delete
    4. Done! I've been fiddling with it for quite some time, phew.

      Thanks so much for the advice! :] :]

      Delete
  141. Salut George,
    Am citit articolul, dar nu si toate comentariile, am ajuns aici datorita titlului asemanator cu ceea ce caut si poate ma poti ajuta.

    Or should i write in english for all people eventually interested?

    I don't wanna creat a miniblog as this post shows it, i just want a list of links based on a certain label.
    I don't want a TOC (table of content) sorted on labels (already know a code for that), but i want to pick a certain label, put in o a static page and get a list of link sorted alphabetical.
    best exemple is my blog, where i have 3 static page (ciuperci comestibile, necomestibile and otravitoare), every post has this labels, but on the static page i insert them every each of them manually, because i'm lazy, i want to make this process automatic. So, the code, pick a conditional label, and put a link on my static related page for every new posts... can you help me to sort out this one?

    thank you.

    ReplyDelete
    Replies
    1. Salut,

      Personally I don't have the experience to do this, but it should be possible. Here are some links with similar solutions:
      - Listing post titles in alphabetical or chronological order (I think this is closest to what you want);
      - Create Archive Page for Your Blog (can probably be adapted).

      Hope this helps!

      Delete
    2. i didn't study you recommendation yet but meantime i want to share a link:

      http://bloggerajutor.robloguri.info/2009/09/cum-sa-faci-un-cuprins-toc-table-of.html?showComment=1392885485899#c2106757906531830117 (you can remove the link if is considered spam ... but please take at look it first )

      this article show a method, give a javascript which can be inserted in a static page and will make a table of content of your labels, already sorted alphabetical which is great.
      the only bad part is that this blog are dead, its author not updating it anymore ... and i don\t have java experience to modify his script ... (everything is there but unaccesible for me)

      Delete
    3. Yes, that looks like what you want. I don't have the experience to modify the script either, unfortunately. You can try using it with the feed to a single label (something like http://blogname.blogspot.com/feeds/posts/default/-/labelname) instead of the feed for all posts (http://blogname.blogspot.com/feeds/posts/default).

      Delete
    4. true, but i'm rookie in blog configuring, so:
      http://blogname.blogspot.com/feeds/posts/default/-/labelname and http://blogname.blogspot.com/feeds/posts/default returns the very same TOC; http://blogname.blogspot.com/feeds/posts/labelname returns blank page
      any other idea?

      btw. i presume the sorting is somewhere inside the java code :(

      Delete
    5. Well, if both feeds return the same TOC there is probably a function inside the script that removes the label. I can't say for sure without seeing the script code. Sorting is surely done through the script, Blogger and feeds in general don't have that option. Sorry I couldn't help more...

      Delete
  142. Wow! very helpful thanks.
    It is easier now with the new blogger interface and design.
    You can do this by copying the URL of each label, then using Label Hypertext, find a suitable position in the "edit HTML" section of your template. Then it should appear alongside other pages.
    Thanks manh!

    ReplyDelete
  143. I'm still not getting the results I want, can you give me an email address so I can send the file. Xml and your correction
    thanks.

    ReplyDelete
  144. Great stuff from you, man. Ive read your stuff before and youre just too awesome. I love what youve got here, love what youre saying and the way you say it. You make it entertaining and you still manage to keep it smart. I cant wait to read more from you. This is really a great blog.

    ReplyDelete
  145. Hi George,

    Great post Thanks a million!!
    However, I still can’t figure out why the highlighting the title in my menu doesn't work? The class ’selected’ seems fine to me?
    So here is the site
    http://betelgeze.blogspot.com-> link 'test for nature'
    And here is the style:
    .selected {border-top:0px solid #aaa; border-bottom:1px solid #aaa;}
    .selected a {color:#ccc;font-weight:normal !important;}
    What am I missing here? Any thoughts?

    ReplyDelete
  146. Hi George again :) sorry for bother you I found the solution. I did of course a silly mistake . Thanks for this great post! it helps a lot!

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

    ReplyDelete
    Replies
    1. The "external link" feature to create a page is no longer supported. You can use custom menu to highlight a label as a page.

      Delete
  148. Thanks for adding this
    please keep posting tutorials, i will come back often to visit the blog

    ReplyDelete
  149. Hi. Thank you for helping me with creating a Blogger page for posts with same label.

    However, I'm encountering a problem. Check out this page I created: http://spotlightphilippines.blogspot.com/search/label/board%20exam?max-results=4

    As you can see, my layout somewhat has sidebars on both sides. What happened is that all the features, images, and links in those sidebars were crowded into the same spot where the labelled posts were located (in the content platform).

    What I did was to place the code after the which was enclosed by a ul element. There were two , but when I placed it after the second which I was referring to in the previous sentence, it worked - with a disadvantage of having all features in the sidebar placed in the posts area. Please help me.

    Hope I can hear from your end sir, spotlightphilippines(at)yahoo(dot)com(dot)ph. I will also bookmark this page so that my blog Spotlight Philippines will be a whole lot better. Thank you!

    ReplyDelete
  150. Please, how can i design my label page?

    ReplyDelete
  151. very useful tutorial, it really helps me out to transform a blogger label into a page for my site.

    ReplyDelete
  152. Hi,

    I hope you see this!!
    So i tried the above HTML code and it worked for 2 minutes and then it went back to normal.
    Isn't that super weird?
    Can you assist me with the same.

    My blog URL is : http://urbanmodish.blogspot.ae/
    i have been trying forever to get the categories tab working!!

    ReplyDelete
    Replies
    1. Hi,
      As far as I can tell right now, you added a list of categories as a drop-down menu in the blog navigation, but some of the links are wrong. For example one is pointing to '/Categories/Search/Labels/beauty', but the correct page in Blogger is '/Search/Labels/beauty'. Hope this helps!

      Delete
    2. Hi George,

      I tried the above, and it still doesn't work! :(
      BAck to square one again.

      I would really appreciate help in this regards

      Delete
    3. Hi,

      I'm not sure how I can help remotely unfortunately...

      Did you use the Blogger 'Pages' gadget to set up this menu or a third-party widget?
      The Blogger 'Pages' gadget has changed a couple of times since I wrote the post above. Right now you can go to your dashboard, click on Layout, then on the Pages gadget click Edit. Then you use 'add external links' to add any of the categories you want to show up in the main navigation. And also remove incorrect links.

      Delete
    4. Hi George,

      I downloaded a template which had the drop down menu in it.
      But have been unable to make it work :(
      I edited as per mentioned by you, however, that doesn't seem to work either.


      Delete
    5. Hi George,

      I managed to fix it.
      Thank you for your time and patience.

      Much appreciated.

      Delete
  153. Hi George,
    I have a static page with a different layout from my home page added to my menu bar, now I want to connect this static page to a label & add pagination. I used conditional tags as you mentioned in your above post to connect my page to the label but its not working. Please help.

    ReplyDelete
  154. I want to display content of a label inside a static page. I have been looking for tutorial for a while but couldn't find one. Is there a way thumbnails from label are displayed inside a static page on my blog?
    Thanks in Advance

    ReplyDelete
  155. Hello, can I redirect from specific label (education) to specific page (our education) ? have any idea ?
    Thanks

    ReplyDelete