How to Create Static Pages in Blogger

Note:
Blogger now supports static pages. To learn how to create pages in Blogger, follow the instructions outlined in What Are Pages?

With some coding, you can easily create static pages in Blogger. For many blog authors, Wordpress is the management system of choice. It provides the most flexibility and options for managing blogs. For those that are not using Wordpress, Blogger is a good, free option. Blogger, however, is not nearly as flexible to use as Wordpress. There are fewer options and templates for that system. The one drawback of using Blogger is the inability of uploading, and using static HTML pages.

There is a simple workaround that you can use to create pages in your Blogger blog that will mimic static pages. I will discuss how to create and use those pages in this post.

Creating Posts as Static Pages

The only option, at the time of this post, to creating static HTML pages in a Blogger blog is by using posts. Now you can easily create an HTML page on another server and then link to it from your blog, but it is much easier to use posts as they will include your template.

When creating the static pages, there are a few things that I would like to point out:

  1. The static pages should not appear in your RSS feeds to your subscribers. They will not be used as posts, so they shouldn’t be included.
  2. The date published shouldn’t be included.
  3. Comments for the page aren’t needed.

I will now show you how to accomplish the above points easily within Blogger. We will be creating a post that will act like a static page on your Blogger blog.

  1. Start a new post in Blogger.
  2. Enter the information that you would like displayed on the page in the Blogger editor.
  3. Once you have entered the content, click the Post Options link.
  4. Now we will satisfy two of the points above. Below Reader Comments select the Don’t allow option to disable the comments for the page.
  5. Below Post date and time, enter a date that occurs in the past. For my pages I use June 23, 2007 since that is the first day of Technically Easy. This should prevent the post from being sent to your subscribers as an update.
  6. When everything is ready to be published, click the Publish Post button.

Now we have a new post that has a past date and doesn’t allow comments. The next steps will prevent the post date from being displayed.

  1. Click the Layout tab to display your blog’s layout.
  2. Click the Edit HTML link to display the layout in HTML.
  3. Check the Expand Widget Templates checkbox to display the Blogger code for each widget.
  4. Search for the location where the post date is displayed. For blogs that use version 2, search for <data:post.dateHeader/>.
  5. Before that line include the following:
    <b:if cond='data:post.allowComments'>
  6. After the post date line include:
    </b:if>
  7. This tells Blogger to only display the post date if comments are allowed for the post. Since we disabled comments, the post date won’t be displayed.

Now load up the new page to see if it is displayed as you would like. You can now link to that page from anywhere on your blog, or another Web site.

If you would like to allow comments on your static page, and would also like to prevent the static pages from appearing in the archives, check out Creating Static Pages in Blogger – Part 2.

Summary

Blogger doesn’t have the ability to add static HTML pages to your blog. To mimic static HTML pages, you can simply create a past-dated post and link to it as if it were a static HTML page. This post also showed how you can prevent the post date from being displayed to make it look even more like a static page instead of a post.

Update:

If you are having trouble with the above code, send me your template using the contact form (link above), along with the error and I’ll have a look. Editing templates in Blogger can be difficult since the built-in editor doesn’t help in correcting syntax.

Related Posts

Creating Static Pages in Blogger – Part 2
Grouping Posts By Categories in Blogger
Blog Designing Tips for New Bloggers
What to Avoid When Designing Web Sites

82 Responses to “How to Create Static Pages in Blogger”:

  1. mynetdude says:

    ok very cool, wasn’t sure if you would reply :) good to know and thank you in advance :) .

  2. ill66 says:

    great. just what i’ve been looking for! :) :)
    i already had my static pages, but the date stamp really bothered me^^

    i’m sure, there’s a similar way to avoid the information, that there are no comments allowed, “links to this” and the RSS-subscribe link to be shown at the bottom of these static pages? would you…….?^^

    just sad, there is no way hiding them pages in the archive-gadget…..

  3. Fred D says:

    Hello. This works great! However, I’m wondering if I couldn’t use the same technique to get rid of the [Older/Home/Newer] pager under the posts that act as static pages?

  4. Fred D says:

    I’ll check it out! Thanks a lot!

  5. Thanks for this.

    I did try it, but found it wouldn’t work on account of errors in the coding. Any tips? I have switched to a non-classic template. could that be the the problem?

    Thanks for your help.

    Pam

    • Paul says:

      The code presented in this post won’t work with a classic template since the code is different. I’m not too familiar with the classic template, and i’m not sure if it provides the same flexibility as the current templates.

  6. Hi there. I tried what you suggested and the change did finally go through. However, my dates are still appearing in those posts.

    Is that offer of you having a quick look at my template (mentioned in the post) still on offer?

    Thank you, in advance, for your help.

    cheers,
    Pam

    • Paul says:

      The offer is still good. Use the contact form (link in top navbar) to send me your template. Just include what you would like changed in your template.

      Also, can you include the dates of your static pages and the format? That would help so I can test it before sending it back to you.

  7. e-space says:

    Hello, I have a problem. I cant seem to find . I am using non-classic template, with some changes(new buttons, header etc.). Can you tell in which part of HTML code to find it. I have checked expand widget templates. just to let you know that it isnt a problem. Thank you for your help

  8. e-space says:

    Hmm, sry, it didnt post data:post.dateHeader/

  9. By the way, Paul, thank you so much for helping me out with my dilemma a few weeks ago. Sorry it has taken me a while to reply here on the blog – I got snowed under!
    I was very grateful that you took a look at my code and cleared all the ‘extras’ (comments, dates, etc) from my static pages. My static pages look so professional now.
    I now follow your blog and get your regular updates and feel that you give very prompt and practical and helpful advice. In my opinion – although I realise your speciality is more technical than content – your site is more useful than Problogger!
    Cheers,
    Pam

Leave a Reply