Adding Pages to a Blogger Blog

Adding Pages to a Blogger Blog

Adding pages (aka: a navigation bar or menu bar) is a great way to organize your blog to make important information easily accessible to your readers. Designer Blogs offers several types of navigation bars:  a navigation bar with simple text links, a navigation bar with custom buttons, and a navigation bar with drop-down menu (click on links for examples). These navigation bars are customized to give your blog a unique & professional look and can be purchased through our accessories shop.

However, you may just want a basic, non-customized Blogger menu bar, so today we are sharing a tutorial that explains how to get pages and a basic navigation bar added to your Blogger blog all on your own!

Steps for adding pages to your blog:

Step 1: Log in to the Blogger blog you are wanting to add pages to and click on the “Pages” link.

1

Step 2: Click the “New Page” button.

newpage

Step 3: Type the page title (this will appear as a link on the navigation bar), add the page content and then click “Publish.” Note: make sure the page is published or it will not show on your navigation bar.

3

Step 4: After your pages are published, you need to add the Pages gadget to your layout to make the categories appear on your blog. Go back to “Layout” and click on “Add a Gadget” in the space underneath the header. Note: If you want your navigation bar placed on your sidebar, click on “Add a Gadget” in the sidebar space.

newpage1

Step 5: Choose “Pages” from the list of gadget options.

newpage4

Step 6: Drag and drop your pages to rearrange them in the order you want them to appear and then click “Save.”

newpage5

Adding a web address to your navigation bar:

Step 1: You may want to add some web addresses or links to labels along with your blank pages. Click on the “Pages” gadget and choose “+ Add link page.”

newpage6

Step 2: In the first box, type the title you want to appear in the navigation bar. In the Web address (URL) box, insert the web address you want to link to.  Then click “Save.”

newpage7

Now view your blog to see your new pages and navigation bar!

6

If you’d like to adjust the positioning of the links, follow the below steps.

Step 1: In your dashboard, click on the “Template” link and then click on “Customize.”

7

Step 2: In the Blogger Template Designer click on “Advanced.”

8

 

Step 3: In the “Advanced” tab, scroll down until you find “Add CSS.”

9

 

To add more space to the left side of the navigation bar, add the following code:

.PageList {text-align:left !important; padding-left: 20px; }
.PageList li {display:inline !important; float:none !important; }

You will see a preview of how the design will look with the changes. If you adjust the “20” to a larger number it will add more space. If you want less space adjust the “20” to a smaller number.  Adjust it as you want and then click “Apply to Blog” to save the changes.

Example:
10

 

To center the links, add the following code:

.PageList {text-align:center !important; }
.PageList li {display:inline !important; float:none !important; }

You’ll see a preview of the changes. If you are happy with the way it looks, click “Apply to Blog” to save the changes.

Example:

11

For any further customizations you might need made to your navigation bar, you can visit our add-on shop to purchase one of our navigation bar options.

Please feel free to leave a comment or contact us at [email protected] with any questions you may have.

You might also like this related tutorial:

How to Link a Menu Bar Link to a Label or Category

Premade Blog Themes - Designer Blogs

Posted by: Lauren


Comments

  1. Great tutorial, Lauren. 🙂

  2. Thank you so much for this tip, Lauren! I had no idea I could do that! I might be playing around with this new "find". Thanks again!

  3. The page function is a great option! I've been enjoying it for some time now.

    But I would love to know how to create your own background and install it. Soooo very much.

    Donna

  4. Thanks for the tutorial, Lauren! I've been thinking about making some pages for a while now. I really love the tutorials here and look forward to seeing more (perhaps more html tips?)

  5. Thanks Lauren – it has always bothered me that i wanted to limit my "about me' section on the home page – so having a separate "about Me" page has solved that. OK that just makes me sound like i love myself! being very new to the blog world (apparently i have been living under a log) – the tutorials are really easy to follow

  6. Thank you so much. This is wonderful. I went and worked on all of my blogs so now it will be easier for people to find the info they are looking for.

  7. Is it possible to transfer existing post to new pages I have created.

  8. The only way I can think of to transfer an existing post to a new page would be to just copy/paste the info from your post to your page.

  9. I am having issues posting on pages from your premade designs. Any suggestions?

  10. I love your tutorials! I'm a newbie and I'm wondering is there a way to put post dividers INSIDE the pages? I know the main page does it automatically but the pages it seems as one very long post…can I change that?

  11. Could you please do an updated version of this tutorial? The edit pages link in step 2 just isn’t there in blogger any more.

  12. I have a question. I want to use a page like the one you created to post recipes. I don’t want the page to be static. I want to have the same functions as the home page. Is that possible with blogger? Thanks Gin http://www.fashion4therealpeople.blogspot.com

  13. It ís difficult to find knowledgeable people for this topic,
    but you seem like you know what youíre talking about! Thanks

  14. This is exactly what i was looking for. Thoroughly and accurately explained each step. Thank you very much.

  15. I just found that there’s a problem for adding the page. Last time, I can do so (just like what you teach). But today, the add page “web address” was no more.

    And, after I add a page in “blank page“, there’s nothing appear in my blog.

    It’s so frustrated!

    • It looks like Blogger changed things yet again! Very frustrating for us as well. We will post a way around this as soon as we can figure it out ourselves. 🙂

    • Blogger recently changed the process for adding pages. We have updated the tutorial to reflect the changes and it should work great for you now.

  16. jagjit thakur says:

    unable to do step no 2. in my blog while doing step 2 drop box is not appearing. blog is directly directed to a blank page option.

    • It appears Blogger just changed things again. We will post a solution as soon as we can find one.

    • Blogger recently changed the process for adding pages. We have updated the tutorial to reflect the changes and it should work great for you now.

  17. salitha indrajith says:

    Guy, it dose’t work for me. pls help

    • Blogger recently changed the process for adding pages. We have updated the tutorial to reflect the changes and it should work great for you now.

  18. I can’t for the life of me figure out how to get the page I just added to appear on the navigation bar. It’s supposed to do so automatically, but nope. Is there something wrong with me? From the recent comments it seems like something might be screwy with blogger.

  19. Thanks for sharing with us this great tutorial. I’ll be back for some great tips…

  20. thank you so much, it has been very helpfull!
    …but for make a bar with custom buttons, how could i do that?
    (sorry if my english is not perfect)!

  21. Thanks for the update! Is there code for CSS for changing the font and font size? Thanks!

    • Hi Rachel,

      You can change the font size by adding this code:

      font-size: 17px;

      Adjust the number (17) larger or smaller depending on how large or small you want the font to be. Your new code with this added should look like this:

      .PageList {text-align:center !important; }
      .PageList li {display:inline !important; float:none !important; font-size: 17px; }

      To change the font, you would need to use the instructions for adding Google Fonts: https://www.google.com/fonts.

      Then you would add the font code it gives you to the code like this:

      .PageList {text-align:center !important; font-family: ‘Raleway’, sans-serif;}
      .PageList li {display:inline !important; float:none !important; font-size: 17px; font-family: ‘Raleway’, sans-serif;}

      Hope this helps!

  22. Hi Lauren,

    Thanks for the update. My problem is I know how to link the pages to the pages in my template but I don’t know how to hide the pages once its linked. Blogger use to give you the option to hide them once linked to the template. Do you by any chance know how to do this. I don’t want to use the blogger navigation, I want to link it to my template then hide the blogger buttons.

    thank you for your help

    Christa

    • You can go to Layout and then just delete the pages gadget and then the menu bar will no longer show but the pages will still exist.

  23. That is what I was looking for from a long time. I have found some same tips on other blog but they were not sufficient to learn how to add the pages to blog. But in this blog everything is perfectly described.
    I am just crazy for this blog and love you a lot.

    Thanks

  24. Very easy to follow instructions … and very useful indeed, this is what I was looking for as I did not understand the Page concept in Blogger. Thank you so much. i will publish this feature as soon as I am ready with the information. Once again a big Thanks!

  25. Hi Lauren,
    I would like to make my menubar just like this one: http://hackaday-thema.blogspot.gr/
    Can you please help?
    Thanks

    • Yes we can do something like that for you. Visit our blog accessories shop and purchase the “navigation bar w/custom buttons = $40” option. Hope this helps!

      • Hi , I have tried following these steps but it doesn’t seem to be working…Some pages are not being posted and when I have managed to, when I click on it the content does not change?

        Thanks

  26. Great tutorial . Thanks 🙂

  27. joHNY says:

    thanks for your help!

  28. Hi! I used this for my blog. Thanks for the tip. 🙂

  29. This is good tutorial. I followed this tutorial. I have created label for some post of my site http://www.abhilashatechnology.com and then trying to create web address page. But for me it is blank page is getting created. As here it shown you can create either blank page or web address page. Your answer is appreciated.

  30. THANK YOU SO MUCH FOR THE TUTORIAL! VISIT MY BLOG PLEASE

  31. DJ MALKA JAYATHILINA says:

    thanks

  32. Thanks for a helpful and dynamic blog.My question is about amount.
    I have seen both 10 and 20 given as the maximum pages allowable. Which is correct?
    Is there a limit to the length of a page. Is it literally a “page” or can it be a lengthy piece of writing? If so, how long?

    • You can create 20 static pages on Blogger blogs. I don’t believe there is a limit to the content length of each page. Hope this helps!

  33. Hi,
    Thanks so much for this tutorial! While I have pages on my blogger, unfortunately, only SIX can fit across horizontally at the top of my site without the seventh page becoming a second “line” or layer underneath (and “centered” too). As a result, this looks unslightly, so I’ve had to put a few different – important – pages in DRAFT and only keep the absolutely necessary ones published.

    I’m guessing I just need to try to make more space along the width of my site/template in order to allow for all the pages to show up in one row, but I’m not sure how to do this. Also, I’m wondering if this might be more difficult because while I did try to follow this tutorial and go to advanced template to mess with the CSS code, I had purchased a pre-made blog, so there was already a CSS code in there + I was afraid to change it.

    Help? 🙂

  34. vasilis says:

    hi! thank you a lot!!! I have a quastion I want the new pages to publish articles how i will do this? I hope to understand me 🙂

  35. Thank you so much for this easy to follow tutorial!

  36. This is such an easy tutorial to follow, just what I needed! I was wondering if you could also tell me how to get rid of the lines around the page names. I would like a more clean appearance. Thank you so much for your help.

  37. Honestly, I could find this almost everywhere but the way you approached it made all the DIFFERENCE! Here is what you made me attain—-www.hereweask.blogspot.com

    From Kenya.

  38. This was a great tutorial, it really helped allot! I have one further question. How do you link your labels to the pages on the top of the blog? Say I wanted a DIY page, I want to click on that page at the top and be able to see all of my DIY posts in the same place. Some advice would be greatly appreciated!

    Thank You!!

    Michelle

  39. Hi, the pages link are still not appearing on my blog’s page list. I just recently purchased blog templates and I’m trying to re-organise my blog. If you click on my website and click “About Me” it just keep directing me to blog not the page i created. the templates are very pretty! Cheers

  40. This is so helpful! I have been looking for a long time how to make the pages

  41. Awesome tutorial…. thanks to sharing with us.

  42. Thanks for sharing these steps to add a page in blog. Currently i am working on http://resumeon.blogspot.com and i will try these steps.

  43. Thanks for making this steps so easy, i works for me and i am so happy

  44. Thank you very much for sharing a very nice tips. I strongly believe this tips will help many young blogger.

  45. Many many thanx! i have done it now. I had to wait more then a year for this but now i made it with the tips of this tutorial. thank you again.

  46. Dostech says:

    thanks for the tutorial
    dostechinfo.blogspot.com

  47. hi,

    Just want to know if there’s any scope to add sub-page under a page ? For example, blog, If I wish to add some more pages under a page as sub-menu/page, is it possible ? Tried to do that from Template editing but can’t find out the name of the pages.. If someone can help me…. Thanks in advance. Jay

    • Hi Jay, adding sub-pages has to be done manually, meaning it has to be hard-coded into the design. You can purchase this option through our blog accessories shop. Select the “NAVIGATION MENU W/DROP-DOWN CATEGORIES (BLOGGER) = $75” option and a designer will be in touch to get those coded in your site for you. Hope this helps!

  48. Meredith says:

    Thank you so much! This was the most helpful post on fixing page titles I’ve found on the web so far! 🙂

  49. This post is really helpful, I am currently working on my blog http://peacefulmindbody.blogspot.com This post will help me to create pages easily.

    Thanks!

  50. Maureen says:

    Hi,
    I want to add pages to my blog but I don’t want the pages to have the same gadgets as the home page of my blog. Is that possible?
    Thanks!
    Maureen

  51. thank u very much for sharing such a nice tutorials . I am following your tutorials to build a better blog for my online income . Here is my blog link TSD

  52. Thanks a lot for the useful information. Is there any way to fix the tab bar so that when scrolling down the page, tabs would always stay at the top of the page?

    Thank you.

    • This is something you’d need to purchase from our blog accessories shop. Select the AVIGATION MENU W/SIMPLE TEXT LINKS = $25 option and note that you are wanting the menu bar to remain static. Hope this helps!

  53. igwegbe lawrence says:

    Yaa! Smart, easy and clean delivery! thanks.

  54. This article is very helpful for me . Thank you

  55. thanks for such a detailed guide. its hard to find guides other than wordpress.

  56. Your blog is a lifesaver

  57. Thanks for the great tutorial. Im new at blogging and still learning the ropes through sites like yours =)

  58. very comprehensive resources.Thanks Erin!

  59. Thank you for this, it has helped me finished About me page on my blog: http://www.gleeoflife.eu. Than you, very helpful! 🙂

  60. There’s certainly a great deal to know about this subject.
    I really like all the points you made.

  61. I just recently purchased blog templates and I’m trying to re-organise my blog.

  62. Precious says:

    Thanks a lot. Very helpful.

  63. Thank you for the tip.. I liked it.. 🙂

  64. easy to follow step by step approach=)you won’t get lost!

    • MLH says:

      I am not seeing the “Add a gadget” tab under my header. I am only seeing “HTML/JavaScript” Can someone assist me please.

      • You may need to first add the pages gadget to the top of your sidebar and then drag that gadget up under the header gadget and a new gadget area will appear. Hope this helps!

  65. M.Akram says:

    Excelent information

  66. Thanks for the detailed steps for adding pages to your blog.

    I am beginner here and it really helps me a lot in adding pages to my blog.

    Thanks,
    Sumit
    http://www.digitalsumit.com

  67. II purchased a blog template that already has a list of items on the nav bar,and want to post on those specific items (about page etc…) Would I still have to add a gadget and a page?

    Basically my template already has “about” and other items on my nav. bar. I don’t want to add an “about” page and have there be two about pages. Does this make sense? Thank you for your help. Great site!

    • Your existing menu bar will carry over to any new designs that you purchase from us. You can create only the pages you want to use. Hope this helps!

  68. Thank you for the tutorial. Very helpful. As a beginner I have a stiff learning curve ahead of me. Question: How do I eliminate the duplication of the page title onto the top portion of my static page? My blog is http://elderkanar.blogspot.com

    • Congrats on Elder Kanar’s mission call and best of luck to him! I’m not seeing duplicate page titles when viewing your blog. Were you able to fix the issue?

  69. Viginia Luther says:

    Thank you so much

  70. Phillip says:

    You are probably tired of answering questions about this considering you published this years ago! I have created my page and I successfully added the page in the cross-column section in the Layout section. The page appears on my blog, however, when I click on it, it does not go anywhere. I also cannot figure out what the link is to the new page. Any suggestions would be helpful!

    • Hi Phillip, we’re happy to try to help you. To find out the link to your new page, go in your dashboard to Pages. Find the page you are wanting the link for and click View under that page. That will open up just that page. You can then copy the url from the address bar and that will give you the direct link for that page.

      Then go back to Layout and click Edit on your Pages gadget. Click “+Add external link” and that will allow you link your page up manually. Paste the url where it asks for the web address and then add the title you want for the link. Click Save Link and that will manually add the page to your site for you. Then you can just go and remove the page from the menu bar that isn’t working for you. Let us know if you have further questions.

  71. Thanks so much ….it works for mee 101%..thanks

Speak Your Mind

*