Static Pages Are Now Available On Blogger Blogs

Back in September 2009, along with introducing a new feature in the official Blogger hacks list – i.e. Read More/post-truncating feature, the Blogger team also gave an indication that BlogSpot blogs will soon have static pages too.

So today Blogger has announced that now, we can add some static pages to our blogs like About-Us/Contact-Us/Privacy-Policy/Advertise etc. – one of the most awaited features on Blogger blogs to stand against WordPress.

Adding these pages is really simple. Once you log in to your Blogger account (log in at Blogger In Draft-that’s the Beta-Blogger and not the usual www.Blogger.com), under the tab “Posting” similar to the link “Edit Posts“, now there’s a new link called “Edit Pages“. Initially no pages will be displayed in your pages-list. So click on the “New Page” button to get started with it.


Type a title for your page, write a few lines in the content section and hit the “Publish Page” button.

Just like the usual posts on Blogger, you can edit the content of these pages anytime you want. But again, similar to the posts, although you can change the title of these pages even after publishing the pages, but you can not change the url of these pages (of course you can delete and create a new page with a completely new url).

Static Pages vs. Regular Posts
These pages are not your regular posts, so they are not visible in your blogs feed. And these are absent from your blog followers reading lists too. Your blog visitors can access any of these pages only if they know the page-url. So you have to link these pages from your blogs layout/any published post, so that your blog readers can read them.

Limitations:
1. Only 10 static pages are allowed per blog.
2. If you are already using a Blogger SEO hack to show only titles in arhive/label pages, then that will apply to these pages too, i.e. in these pages, post-content will be hidden and only the title will be displayed. So undo that Blogger trick, if you want to add static pages to your blog.

To Allow Commenting in Blogger Static-Pages

NOTE:
In static pages, under “post options“, by default comments option is set to “don’t allow, hide existing“, so you will not see any comment-form below the pages. If you want to allow commenting in your static-pages too, then change that option to “Allow” before publishing the page for the first time.

Additional Associated Widgets
A page-list widget has also been added to the list of Blogger Widgets, this widget will have the list of all the static pages of the blog. The widget has two layouts: Horizontal – as tabs at the top of your blog, or Vertical – as links in your blog’s sidebar. You can decide which pages will have links, and in what order they will appear in the widget.


But it is not necessary to use these widgets to display your pages on your blog. Rather my sugegstion is to use any horizontal multi-evel menu/ vertical multi-level menu with links not limited to these pages but you can add links to many other posts/labels/blogs.

I have created the First Static page on BloggerStop – Become a Guest Author.
So what’s your first static post? comment and show it to all our readers !

Image credits: Smarter

80 thoughts on “Static Pages Are Now Available On Blogger Blogs

  1. @Soufiane
    Yeah it is down temporarily, some glitches are yet to be removed.

    @Beben
    Suppose a Blogger do not have the pages like advertise/contact/privacy-policy in his/her blog. Now he has build a big readership too.
    Now if s/he tries to make static pages with the previous method (publishing a normal post with back-date), then although the post will not appear on the homepage, but it will get in to the blog-feed, and the page will be read by alll the subscribed readers, although it wasn't actually have to be a part of blog-feed.
    Hope you got it.

    View Comment
  2. @Durkin,

    That's not a problem specific to you buddy.
    Blogger has recently updated the UI of the post-editor and while updating the UI, they have changed the default option of "HTML Settings" to "ignore new lines".

    So edit any of your old posts and expand the "post options" at the bottom of the post-editor.
    And then mark the option "convert new lines to <br />" under "Edit HTML Settings", this will be saved forever (so you don't have to change this everytime while writing a new post.)

    View Comment
  3. @Divya, I've tried changing that option already and it had no effect. The breaks appear fine in the editor, even if i change to the 'compose' view, but when I publish its just one block of text. Any ideas??

    View Comment
  4. I have started using pages which I found by accident, to access pages you have to be in Blogger default mode. You can take a look at my blog and check out my pages located at http://www.realsimplehealthyliving4you.blogspot.com. My one issue is I am unable to center the pages element. However, I just created links to my articles under the appropriate page category which allows my readers to specifically go to the page they are searching for and then choose an article, click on the article to pull up the post for reading and this is by far easier compared to going through post after post especially the older ones.

    View Comment
  5. Hi Annie,

    That's a great idea. I have done a similar pages list under the menu-item "Optimize your blog".
    Anyways I have a suggestion for you, the links in each of your pages viz. lifestyle, fitness etc. are at the bottom. And so some of your new readers may not notice them. So you should bring them up.
    This suggestion is based on a scientific study, you may read the readers eyetracking web pages heatmap study

    BTW what are the page elements for which you want center alignment?

    View Comment
  6. @Kytro, as I have mentioned in the post, if you are using the titles-archives hack in your blog, then the pages are displayed as only titles withoput content. Simply undo that hack and your pages will be normal again.

    Go to this page:
    to show only titles in arhive/label pages
    And undo the changes (don't simlpy delete all the new code, replace it with the previous code-line)

    @neno,
    I think you might be using this code too, plz check and tell me if you are using it or not.

    View Comment
  7. It is making me CRAZY!! I have tried to get rid of my side bar on the static pages, but no matter where I put the code, it will not go away! AcK!!! Please Help. I have tried it directly before (carrot)/head(carrot) and inside the widget code, after (carrot)![CDATA[, and I still can't seem to make it work.

    (carrot)style type='text/css'>
    # sidebar-wrapper(display: none)
    # main-wrapper(width: 970px)
    (carrot)/ b:if></ style(carrot)

    my blog: http://daylilydaze.blogspot.com/

    View Comment
  8. Hey Michelle,

    You have to make these changes to your template:

    change this code:

    #main-wrapper {
    width: 410px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    to this:

    #main-wrapper {
    min-width: 410px;
    float: left;
    word-wrap: break-word;
    overflow: hidden;
    }

    that is, change width to min-width.
    And find this code:
    </head>

    and immediately above it, paste this code:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    #sidebar-wrapper {
    display:none !important;
    }
    </style>
    </b:if>

    __________
    Regards
    Sai

    View Comment
  9. Ok, I got it. Instead of changing the main wrapper for the whole template, you change it under the b:if cond

    #sidebar-wrapper {
    display:none !important;
    }

    #header-wrapper {
    width:820px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

    #outer-wrapper {
    width: 850px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 820px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #footer {
    width:850px;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }

    Great… thanks for the advice… now I am not *SO* crazy!

    View Comment
  10. hi, sai …
    I am again:D, I still was curious about my static page, because until now I still can not find a solution:-/. I am waiting for an e-mail from you, but from your last notice: February 14, 2010 5:00 PM, no e-mail from you that entered.

    sorry if there is something wrong, I really need your help.

    View Comment
  11. First impressions from reading this post – 'fantastic!!!' –
    and 'thank-you' to the owner of this blog.
    Second impressions after reading the comments – what a load of "negative thinking, pessimistic, dooms-day-thinking, 'glass-half-empty', short sighted, whinging, whining, no-hopers" there are who waste their time posting on blogs.
    For the sake of God people – do yourselves a favour and look for the good in things before you are so ready (and you are SO ready) to knock the stuffing out of something new!

    View Comment
  12. With your good directions I've been able to make my first static page. Thank you, didn't know I needed to be in blogger draft to make it happen. I had tried previously.

    Please swing by to check it out, titled how can you help.

    Again thanks
    Sandy

    View Comment
  13. @Sandy,

    you did a great job, the page is coming up perfectly.

    @Ed,

    I was out of town for the last 7 days, just replied to your mail at this id: kytro360 (yahoo)
    Actually I did reply to your mail already, but the email id I used was wrong, hope you got the answer this time.

    View Comment
  14. @Edwin,
    In the template, you mailed to me, I found this code:

    <!–ARCHIVE-TITLES-STARTS–>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <li><a expr:href='data:post.url'>
    <data:post.title/></a></li><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <!–ARCHIVE-TITLES-STOPS–>

    which is nothing but, the archive titles hack, just replace that code with the new code from that same tutorial and your static pages will be normally shown.

    View Comment
  15. Sai, as you know you can now create stand alone pages that you have a link to on top of your blog. Well, I want the page to link to a specific label (ie printable coupons) and then it will show all the posts with that label. I have alot of labels and would like a select few to be on top with the pages links. hopes this makes sense…

    View Comment
  16. Hey!
    Just a quick question. How do I change the URL of the static page? I'm blogging in german my site title contains an umlaut (ä) This will be diplayed as "a" in the url but I need it to be "ae"

    Thanks in advance.

    Oh and is there any way to access the html code for the static pages?

    View Comment

Leave a Reply

Your email address will not be published. Required fields are marked *