Creating static pages in Blogger

Update Jan 2010
Finally Blogger has come up with the much awaited (static) Pages feature. So now you no longer need this hack to create static pages. However, you still have to do some coding if you want to make the static pages look different from other pages. Please refer to this tutorial: Apply different layout/styling to static pages

Update 3 Oct 2009
Now you can truly prevent static pages from appearing in homepage, without the need to backdate the posts. I’ve edited much of the post. Some of the comments prior to this update will seem irrelevant.

As you may know you can’t create static pages in Blogger. What we can do is mimic static pages using posts. You can use “static pages” for your About, Privacy Policy, Contact Us pages or other info about your blog.

So how does a static page differs from a post? First of all it should not show up in homepage. Secondly, there should be a link to the static page in the homepage. Thirdly, it should look more like a page than a post -without comments section, timestamp, blog pagers (those newer and older posts links) or any other elements associated with a blog post.

Let’s get started.

 

1. Label your “static page” post

Apply a label your “static page” post before publishing it, or apply it your existing post. Choose a unique label and make sure no others labels are to the post.

For the purpose of this tutorial, I will use the label “static”.

 

2. Put “static page” link in homepage

The most common way to link to your “static page” from the homepage is by using a navigation or menu bar. If you don’t have one, here is a tutorial on how to create a menu bar.

Once the bar is added, you put the link to the page into a tab on the bar. To get the link, just follow this simple steps:

1. Go to Dashboard > Edit Posts.
2. Click the label “static” from a list of labels on the left of your screen. All posts labeled “static” will be listed on the right.
3. Click View link next to the post to view it. The link to the post (a.k.a. the post page URL) is inside your browser’s address/URL bar.
4. Copy and use that URL for the tab.

3. Remove the “static page” post from homepage

This hack will remove the “static page” post from homepage and from all other pages except the individual/post page. So in effect the “static page” post will be invisible and inaccessible to your readers, except via the link provided in step 2 and via Blog Archive gadget.

So here it goes:

1. Go to Dashboard > Design Layout > Edit HTML.
2. Back up your template.
3. Tick the  Expand Widget Templates check box on top right of the HTML window.
4. In the code window, look for this line:

   <b:include data='post' name='post'/>

5. Replace it with the code below:

   <!-- Static page hack Start--> 
   <b:if cond='data:post.labels == &quot;&quot;'>
   <b:include data='post' name='post'/>
   </b:if>
   <b:loop values='data:post.labels' var='label'> 
   <b:if cond='data:label.isLast'> 
   <b:if cond='data:label.name != &quot;static&quot;'> 
   <b:include data='post' name='post'/> 
   <b:else/> 
   <b:if cond='data:blog.pageType == &quot;item&quot;'> 
   <b:include data='post' name='post'/> 
   <style>
   .post-header-line-1, .date-header, .post-footer, #comments, #blog-pager, .post-feeds, .sidebar { display:none !important; }
   #main-wrapper {width: 980px; }
   #main {width: 900px; margin: 0 auto;}
   </style> 
   </b:if> 
   </b:if> 
   </b:if> 
   </b:loop> 
   <!-- http://BloggerSentral.blogspot.com -->
   <!-- Static page hack End -->

   (Codes from line 2 until 4 prevent posts with no label from being removed too. If you label all your posts, you can omit these lines).

4. Style the “static page”

Styling or formatting is done inside the style tags in line 13 until 15 of the above code. This is where we make the static page look more like a page and less like a post. In the code above, we

1. Remove post-header-line-1 (which usually contains post author name and time stamp), date header, comments section, blog pager, comment subscription link and sidebars. This is done in code line 13.
2. Widen the post area to fill up the spaces vacated by the sidebars. This is done in code line 14 and 15. If you want to do this too, find out what’s your header or header-wrapper width and use it here.

• Identifying and adding your own elements to the code

  Your elements’ Ids and Classes maybe different from the ones given in the code above. You can find yours by going through your template code. To get an idea what to look for, here’s a sample code snippet, taken from BloggerSentral’s template:

  <div id='lowerbar-wrapper'>
  <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
  <b:widget id='HTML5' locked='false' title='Reciprocals' type='HTML'/>
  </b:section>
  </div>

  As you can see, an element be it a division, section or widget is given an Id or Class or both. To remove it from static pages, simply add the Id or Class to the selector list in line 13. For an Id you need to add “#” prefix and for a Class, add “.” as prefix. For example if you want to remove “Translate This Page” widget, all you need to to is add #HTML16 to the selector list.

  Update: For widget and section Ids you can now use How to find Blogger widget and section Id method.

5. Remove “static” label in Labels gadget (if you have one installed)

Because we introduce a label “static” for the post, that label will show up in Labels gadget. You can hide it, by simply editing the Labels gadget.

1. Go to Design Layout > Page Elements and click the Edit link in Labels gadget box. 
2. In Configure Labels window, tick Selected Labels
3. Untick “static” label check box.
4. Here is the result: 
   
   

   Before -with “static”	After -without “static”

You can look at the end result, my Privacy Policy or FAQs page.  (I have transferred the “static pages” to the new Blogger pages.)

Enjoy!