Create Static Pages in Blogger – Part 2

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.

I recently wrote a post titled How to Create Static Pages in Blogger where I discussed one method of using posts to mimic static pages. One question that was asked involved removing the static pages from the post archives in Blogger. From what I have seen, you can’t prevent a post from being added to the archives, which would make all static posts appear.

Using my programming background, I decided to find a way to prevent the static pages from appearing in the archives. When experimenting with different methods, I finally came up with a method that works, as well as allows commenting on the static pages. This post explains how to create this type of static page.

Benefits of the New Method

In my first post about static pages in Blogger, I removed the ability to comment on a static page. This was the flag to Blogger that indicated the page was to be static and that the date shouldn’t be displayed. Now I know some may want to enable comments on certain static pages, so this method wasn’t going to work for them.

I went back to the drawing board and came up with another solution to the problem. The new solution has two benefits:

  1. The new static pages allow comments (unless you disable this ability for the page).
  2. The static pages will be removed from the Archives widget.

If this sounds like something you are interested in accomplishing, then read on. I do have to mention that there will be some editing of your blog’s template to make these static pages work properly, but I will try to walk you through the edits step-by-step.

Gathering Some Information

Before we begin, we will first need to grab some setting values from your blog. To find these values, use the following steps:

  1. Log in to your Blogger account and then click the “Settings” link beside your blog.
  2. Click the “Formatting” link near the top.
  3. Beside the “Date Header Format” option you will notice the format used to display the dates in your post. Write down the date displayed so you know how the dates are displayed in each post. For example, the date displayed for my blog is “June 16, 2008”, which means that I will write down this date.
  4. After you know the format of the date, let’s check the format of your archives. Click the “Layout” tab at the top of the screen.
  5. Look for the “Archives” element in your layout and then click its “Edit” link.
  6. Next to “Style” you will see three option buttons, with one of them selected. Write down the name of the selected option.
  7. Beside the “Date Format” option, you will see the format of the archives dates. Write down the date you see displayed. For those that have selected the “Hierarchy” option record the value in the “Year” option.
  8. For example, mine is displayed as “January 2006” or “2006” for the Hierarchy option, so I will write that date down.

  9. Click the “Cancel” button to close the window.

Now, this part doesn’t require any setting lookup, but I just want you to think of a date that occurs in the year “previous” to your first post.

As an example, I have chosen “June 23, 2006” as my date as this is exactly one year “before” I started Technically Easy. The steps I will outline below, will use this date. When following the steps below, you should use your own date instead of mine. From this point forward, all static posts should use this date.

Now that you have these two date formats and a date from the past, let’s get started on creating some static pages.

Creating a Static Page

So now we have the post date format, the archives date format, and a date that occured in the past before your first post. Let’s create a static page.

  1. Under the “Layout” tab, click the “Edit HTML” link.
  2. Let’s backup the template first. Click the “Download Full Template” link to save your current template.
  3. Once the template is backed up, check the “Expand Widget Templates” checkbox to display the code for all elements on your blog.
  4. Search for the following:
    <data:post.dateHeader/>

    This is the code that displays the date for each post.

  5. Change that line of code so it looks like:
    <b:if cond='data:post.dateHeader != "June 23, 2006"'>
      <data:post.dateHeader/>
    </b:if>

    Keep in mind that you should insert the date you chose above instead of my date. Also make sure that the date is in the correct format, which was the first format you wrote down.

    The above line tells Blogger to only display the date in the post if the date of the post is not June 23, 2006.

  6. Once you have inserted the above code, search for “BlogArchive”. This should bring you to your archives widget.
  7. Changing this code is a little more complex. The reason for this is that you can display the archives a few different ways. This is where the archives option that you wrote down comes into play.

    If you chose the “Flat List” archives, use the following steps:

    1. Search for:
      <b:includable id='flat' var='data'>
    2. Replace the entire includable section with the following:
      <b:includable id='flat' var='data'>
        <ul>
          <b:loop values='data:data' var='i'>
            <b:if cond='data:i.name != "June 2006"'>
              <li class='archivedate'>
                <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
              </li>
            </b:if>
          </b:loop>
        </ul>
      </b:includable>

    Once again you will use your month and year chosen in place of mine. You will need to also ensure that the date is formatted the same as the your archives format you wrote down earlier. Since the date I chose was “June 23, 2006”, and my date format was “January 2006”, I would write my date as “June 2006”.

    The above lines of code tell Blogger to only display the archive link if the archive date does not equal “June 2006”. Since I started my blog after June 2006, the only posts published in that date are my static pages.

    If you chose the “Dropdown Menu” archives, use the following steps:

    1. Search for:
      <b:includable id='menu' var='data'>
    2. Replace the entire includable section with the following:
      <b:includable id='menu' var='data'>
        <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
          <option value=''><data:title/></option>
          <b:loop values='data:data' var='i'>
            <b:if cond='data:i.name != "June 2006"'>
              <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
            </b:if>
          </b:loop>
        </select>
      </b:includable>

    Once again you will use your month and year chosen in place of mine. You will need to also ensure that the date is formatted the same as the your archives format you wrote down earlier. Since the date I chose was “June 23, 2006”, and my date format was “January 2006”, I would write my date as “June 2006”.

    The above lines of code tell Blogger to only display the archive link if the archive date does not equal “June 2006”. Since I started my blog after June 2006, the only posts published in that date are my static pages.

    If you chose the “Hierarchy” archives, use the following steps:

    1. Search for:
      <b:includable id='interval' var='intervalData'>
    2. Replace the entire includable section with the following:
      <b:includable id='interval' var='intervalData'>
        <b:loop values='data:intervalData' var='i'>
          <b:if cond='data:i.name != "2006"'>
            <ul>
              <li expr:class='"archivedate " + data:i.expclass'>
                <b:include data='i' name='toggle'/>
                <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
                <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
                <b:if cond='data:i.data'>
                  <b:include data='i.data' name='interval'/>
                </b:if>
                <b:if cond='data:i.posts'>
                  <b:include data='i.posts' name='posts'/>
                </b:if>
              </li>
            </ul>
          </b:if>
        </b:loop>
      </b:includable>

    You will use your year chosen in place of mine.

    The above lines of code tell Blogger to only display the archive link if the archive date year does not equal “2006”. Since I started my blog after 2006, the only posts published in that year are my static pages.

  8. Once you have changed your archives section, click the “Save Template” button at the bottom to save your template.
  9. If you receive an error, check the changes you made to ensure you closed all of your tags.
  10. Now if you have previously created static pages, edit those posts and change the post date to your new date you have chosen.

Now whenever you publish a static post using the date you specified you can enable comments, and prevent the post from appearing in the archives widget on your blog.

This post was complex to write, so if you spot an error in my steps, please let me know and I will correct the error to avoid any problems in the future.

Adding HTML Code in Comments:

If you reply in the comments with some HTML code it won’t appear in the comments. To make the HTML code appear, ensure you add the HTML code as outlined in How to Display HTML Code in Blog Comments.

Summary

I had previously written a post that explained how to use posts as static pages in Blogger. The method provided in that post prevented comments from being displayed on that page as well as the page being displayed in the archives.

The method outline above allows comments in the post, as well as removes the post from the archives so the post acts more like a static page than an actual 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
How to Create a Development Blog in Blogger
Blog Designing Tops for New Bloggers
Remove Navigation Links For Static Pages in Blogger

103 Responses to “Create Static Pages in Blogger – Part 2”

  1. buy aprons says:

    @paid critique

    can you make me a review on your site?

    @admin

    is it possible to make a single page blog post?

  2. agus pramono says:

    wow… this is important posting. Terima kasih (means thanks,in my language)

  3. Ok so I have a 3 column custom template. I have used your static page part 1 and 2. I was wondering if you knew how to remove the side bars from the static pages and widen the posts section. I am wanting to make these pages a place where I can post several pictures of items for sale.

    • Paul says:

      That would require a little more work, since you would have to include checks for static pages in other locations, probably where you define your columns in the CSS portion of your template. Have you looked into Blogger’s new static page support? They now allow you to create static pages within Blogger itself.

  4. Daryl Drake says:

    CODE#1

  5. Daryl Drake says:

    Hi can you check my blogsite, i have a problem. On my dropdown archive 2 “November” Dropdown list are showing… the November 2009 post and my November 2008 posts. I want blogger to not display those post published in November 2008. I make sure that when i publish my post i change the schedule date. and i follow correct your HTML formatting on my layout hTML code.

    GATHERED INFORMATION:
    Sunday, May 30, 2010
    Dropdown Menu
    January

    Date of my first post is 11/28/2009
    11/28/2008 – November 28, 2008

    These are some of the codes i used on my HTML layout:

    CODE#1

    CODE#2



    ()

    </b:includ

  6. Zool says:

    Thanks Paul, it worked fine.

Leave a Reply

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

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