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 How to Create Pages in Blogger.

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

How to Create Pages in Blogger
Grouping Posts By Categories in Blogger
Blog Designing Tips for New Bloggers
What to Avoid When Designing Web Sites

79 Responses to “How to Create Static Pages in Blogger”

  1. arun kumar says:

    how to make home page with update in label feeds

  2. agus pramono says:

    wow..wow.. this is really great posting

  3. Jason says:

    same problem here. I can’t find the . I just selected “Don’t Allow, hide existing” in the Reader comments under the Post Options. The problem is you can still see the Date and TIme of posting. Pls check my sample static page at http://ruleoftrilogy.blogspot.com/2010/02/about-us.html.

  4. Naresh says:

    I disabled comments. Tried to add blog list as a static page. But failed.
    http://enemymind.blogspot.com/

    kindly help me out… I have left the page as it is. so that you can chk it out. Will remove it though asap.

    Thanks
    Naresh

  5. Tenezo says:

    No Need for this Trick any more. You can Create Blogger Pages Officially…

  6. EMR says:

    Really works great.

  7. Bert says:

    exactly like Shantelle and Jenna, I cant find any codes in the html on my blog such as

  8. Jenna says:

    just like shantelle, i cannot find these lines of code either. what can be done?

  9. Shantelle says:

    I cannot find these lines of code:








    Any ideas???

  10. OeS says:

    What if you don’t want the post to appear in the “blog archive”, either?

    Like, say you made an “about” post and wanted to keep it off the archive. If the date for the “about” post is set during a year with no other posts, this would be only beneficial. But can it be done?

  11. dimstar4now says:

    Dude, it works gr8! Thx 🙂

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

  13. e-space says:

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

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

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

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

  17. Fred D says:

    I’ll check it out! Thanks a lot!

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

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

  20. mynetdude says:

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

  21. mynetdude says:

    bah! code doesn’t appear in comments… ok… what a useless way to have to start over.

  22. mynetdude says:

    i followed your instructions on this page:

    # Search for the location where the post date is displayed. For blogs that use version 2, search for .
    # Before that line include the following:

    # After the post date line include:

    So let me get this straight: “before that line” I did that, and the date still appears on that page here’s what my code looks like:



    I see that putting anywhere causes a parse error, I had it in once and it did not give me an error but did nothing either.

  23. Bobby says:

    Great tip! Thanks.

  24. sandrar says:

    Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.

  25. JROB says:

    Thank you for that helpful information. I wanted to suggest another way, which I think is much easier. I created a whole other blog. My site is jrobsguide.com so my privacy policy address is jrobsguideprivacypolicy.blogspot.com. I chose a very simple template. I removed all the extra stuff on the side. I added a link on the side and on the bottom that links back to my home page. I then copied the url and then created a link at the bottom of my main site. It worked well.

  26. Vicky says:

    Thanks for this tutorial!
    but unfortunately i cant find data:post.dateHeader in my HTML code, nothing similar either 🙁

    Vicky

  27. Kim says:

    Hi Paul
    Thanks so much for this great step by step tutorial. Computer wiz I am not… I went through the steps, BUT, I lost the date that precedes all my posts. Is that supposed to be? I thought I would only lose the date for the static page I created since all my other posts allow comments etc. Confused – can you set me straight? Or tell me what I did wrong. Thanks
    Technically challenged
    Kim

  28. Dio Ivanov says:

    What about “Framed About Me” like mine?
    Check http://www.vektanova.com

    It works faster and very easy (i mean quite easy).

    • Paul says:

      Using frames is one method of creating static content. I preferred creating a non-framed version.

      • Dio Ivanov says:

        Yep, Paul. Non-framed version is good, i’d used this way too long ago, but it is annoying my blog archive.

        I am a good reader of your blog, and already bookmarked on my internet browser. 🙂

  29. Paul says:

    Just to make sure I understand, are you saying the information isn’t displaying on the home page, but is displaying within the actual post page?

  30. Simon says:

    Thank you for putting up this tutorial.

    Based on your work, I came up with a way to suppress the date using labels. Basically, it loops through all the labels assigned to a post, and if the last one is “Pages” it does not print the date. (Thus, you would label all your pages with that label).




    • Simon says:

      Looks like the code didn’t get through.

      Anyways, here is the pseudocode:

      loop through all labels
      if this is the last label in the list
      if the last label does not equal “Pages”
      print date
      endif
      endif
      end loop




  31. Hasyir says:

    ok, thanks again

  32. Hasyir says:

    Hello.
    thanks for your post here.
    I manage to follow your step here but I’m lost at number 6 step.
    What is ‘after post date line’ means? I can’t find it anywhere

  33. Chris says:

    Hi,

    How to hide the post on the archive widget ?

    Thanks

  34. I currently use WordPress as my main blogging platform, but I am thinking of launching a blog with the Blogger platform. I think it will be good experience to widen my niche, and cover Blogger SEO and not just WordPress SEO.

    It is interesting to find out some of the differences between WordPress and Blogger for SEO and for making themes for Blogger.

    • Paul says:

      I’d be interested in Blogger SEO as I still have a Blogger blog. While Blogger isn’t has editable as a WordPress blog, I’m sure SEO can still be done on a Blogger blog.

      • Spunky Jones SEO says:

        Paul, I will start next week and setup a blogger blog, design a few themes. Then, I will start working on some SEO, starting with on-page SEO factors. I will then ad a new category to the Spunky Jones Blog for the Blogger platform and start adding information. That is my plan that I currently have. Can you refer some blogs which use the Blogger platform that have good good content, search engine rankings, Alexa rankings, Pagerank? It would be helpful to me and save me some time finding them. Thanks.

        • Paul says:

          The blogs I usually visit use WordPress, although I’ll see if I can find some Blogger blogs. You’ll probably have as much luck as I will.

  35. sefi says:

    hi Paul!
    i to do what you said but after i click on the link of the static page, blogger says that this page does not exist. why is that?
    in my tempate the navbar is linkced to external sites. can it be the reason it does not recognize the link from inside the blog?
    thanks,
    sefi

    • Paul says:

      Try the following:

      From your Blogger dashboard, click the New Post button.
      When the blank post editor is displayed, click the Edit Post link from the navbar at the top.
      When you see your posts, click the View link beside the post you want to link in your navbar.
      Copy the URL in the address bar and then paste it into your HTML.

  36. igv says:

    Hi Paul, did you receive my email of the template? I was not sure if I get your email right. Hope you did receive it.

  37. igv says:

    Hi Paul, how can I send you the template? I don’t know your email. Thanks for the help.

    • Paul says:

      You can find my e-mail from the “About” page (link in top nav bar). It is listed under the “Contact Me” section down the page.

  38. igv says:

    Hi, i have tried deleting the single quotes and re-add them, but the same error exists. Hope you could help me. Thanks.

  39. Doug says:

    I tried using the code, with the at the end of the line but keep getting an error message that the XML statement must be closed. But no matter where I put the suggested code to close the b:if statement, I get the same message over and over. Can you help me solve this?

    Thanks.

    • Paul says:

      When you copy the code into your template the single-quotes may not be copied correctly. Replace all the single-quotes in the code after you pasted it into your template. This may correct the problem.

      I’ll try changing the font in my blog to fix the single-quote issue.

  40. Juliet says:

    Hi,

    This is exactly what I need to do – just a static spot for the a required privacy policy, but I’m wondering if something has changed on Blogger in the last couple of months? When I put in the code absolutely nothing changed. It rendered without errors, but exactly as before. I tried commenting out the original line with the same effect so maybe I’m looking in the wrong section entirely but this was the only spot where data:post.dateHeader/ exists. Original code section below… Any tips would be appreciated.
    Thanks,
    Juliet





  41. Paul says:

    Thanks Aidan. I have changed the quotes in the code above, so hopefully it will copy better.

  42. aidan o driscoll says:

    That did not work out as good either 😀

    In your HTML Template editor inside blogger just delete the single quotes and re add them again, they should look straight up not italicised. My last two posts cannot show this due to how pauls blog template is interpreting a single quote, whatever font is being used here for posts / comments is italicising the single quote.

    Sorry for multiple posts Paul, delete my first one anyway

    Cheers
    Aidan

  43. aidan o driscoll says:

    UPPPZ – 2ND ATTEMPT:

    Hi Guys and @Gen,

    The reason you are 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: Open quote is expected for attribute “{1}” associated with an element type “cond”.”

    Note in the line provided by Paul:

    ’data : post.allowComments’

    The QUOTES if copied from his article are Italicised – delete / overwrite them with regular quote:

    ‘data : post.allowComments’

    Very Subtle, but I hope you see the difference. Blogger cannot interpret Pauls italicised quote.

    Cheers
    Aidan

  44. aidan o driscoll says:

    Hi Guys and @Gen,

    The reason you are 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: Open quote is expected for attribute “{1}” associated with an element type “cond”.”

    Note in the line provided by Paul:

    The QUOTES if copied from his article are Italicised – delete / overwrite them with regular quote:

    Very Subtle, but I hope you see the difference. Blogger cannot interpret Pauls italicised quote.

    Cheers
    Aidan

  45. Gui says:

    To fix this problem, add this to the HTML:

    NOT THIS:

  46. Paul says:

    @Gen: Check your if statement to ensure you have closed all of your quotes. If you would like me to have a look, then just send me your template, in an e-mail.

  47. Gen says:

    I tried all here to hide my static page post,but still it says

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”.

    please help

  48. John Evers says:

    (data:post.dateHeader/)

  49. John Evers says:

    Paul, this does not work in one of the most popular templates as “” does not exist in here.

    http://www.eblogtemplates.com/ads-theme-blogger/
    I just hope we can get this to work.

    Thanks, John

  50. Paul says:

    @John: You can try my other method of creating static pages. You can read it at: http://technicallyeasy.net/2008/07/creating-static-pages-in-blogger-part-2/.

    I will include a link to it at the end of this post.

  51. John Evers says:

    actually re above…I did not think..I guess I can just add an empty line myself on all the static pages…so the only issue remains my Guestbook but that I can live with. GREAT!

  52. John Evers says:

    THIS IS amazing! The only downside is to be seen on my website. As you can see the middle text is not in sync anymore with the text on the sidebars as it should be and can be seen on my guestbook. This is another downside…The Guestbook should not have a date as it is static…, BUT should allow comments.
    Is there a possibility to create an empty line whenever comments are not allowed to correct issue 1 as mentioned above??????

  53. Eden says:

    This is a truly awesome, simple and effective hack for removing the date on static pages. Thanks for the insight — it’s made Shirts on Sale look that much better.

  54. Macieyo says:

    You are my hero;-) That's the best & easier way to create static-like page in Blogger i found! And what's the most importent, with this 'hack' you can hide everything you want! labels, author, even hole post footer lines…

    Big thanks!

  55. Paul says:

    Thanks. I believe that this is one of the easier ways (that i found) to create a static page.

  56. Thomas says:

    Wow. That was a great post!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.