PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Creating “Static” Pages With Blogger

Posted by on 28th Apr 2008 | 25 comments

Blogger Static PagesStatic pages are a useful way of offering your readers information about your blog. Unlike WordPress, Blogger does not feature the ability to create pages. This presents a problem for those using Blogger to publish their blogs as “about”, “contact” and even “archive” pages have become the norm among blogs and are often sought after by blog readers.

However, there is a way to work around this problem: by using a post as the basis for a page, you can create the sense of static pages in Blogger and link to these in the navigation section of your template. In this post, I’ll explain the method many Blogger bloggers use to successfully create “static” pages in their blogs, along with a few ideas for pages you may like to create.

Creating your “Static” Pages in Blogger

The blog pages we can create in Blogger are not truly pages; instead we can use a blog post as a “page” and backdate the timestamp so that the page does not show up in recent feed entries.

To create your Blogger page, simply fire up your post editor, write your title and any content you would like to appear in the page. You can make your post appear more “page like” by using headings where appropriate and inline CSS to add some style.

Altering the post options

While you may like an “about” page to appear as a recent post entry, the illusion of a “static page” in Blogger is best created by backdating the post. This ensures that your post will not appear as a recent entry in your archives or blog feed.

To backdate your post, look for the “Post Options” link beneath your post editor. The section which appears will allow you to backdate your post to whatever date you prefer. I tend to backdate pages to a date before the first post written on my blog. Then if a reader does go back through your entire archives, these post pages will seem to appear in the right place!

The post options section will also allow you to prevent comments being posted on this particular page, and also to hide any backlinks. Most WordPress powered blogs do not allow such features on the static pages, so changing the settings for these features on your “static pages” may be an option for you to consider.

Linking to your Static Pages in Blogger

Once you have created “static” pages for your Blogger blog, the next step is to provide links to these pages in an easily accessible place in your template. You will probably have noticed that WordPress powered blogs may feature a navigation bar above or beneath the main header section, which is often the first place a reader will look to find links to your blog’s important pages. This can easily be duplicated in Blogger templates too.

There are many different ways of adding a navigation section in Blogger. In this post I will explain the easiest (and most functional) method which takes only three simple steps to complete.

Adding a Simple Navigation Section in your Blogger template

  1. Go to Layout>Edit HTML in your Blogger dashboard and locate the following section of code:

    <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
    <b:widget id=’Header1′ locked=’true’ title=’Testing Time of Day Background Script (Header)’ type=’Header’/>
    </b:section>

    Change the line in red to this instead:

    <b:section class=’header’ id=’header’ maxwidgets=’2′ showaddelement=’yes’>

  2. Next add this section of code just before the closing </b:skin> tag in your template:

    #header ul li {
    display: inline;
    padding: 0 5px;
    }

    Then save your template.

  3. Finally, go to Layout>Page Elements in your Blogger dashboard. You will see that you can add a new page element above your header.

    In this section, add a new “Link List” widget, and add the links to your “static pages”, using the site name as the text you would like to appear for your link (eg: About, Contact, Archives).

The easiest way to locate the URL for your blog pages is through the post editing section of your Blogger dashboard. Skip through to the earliest pages of your archives until you find the date section to which you have backdated your posts. In the left hand column you can choose to “View” each page. You can either view the page and copy the link from your browser’s URL bar, or right click on the link and choose to save the link to your clipboard.

Pages you may like to add to your Blogger blog

Here are a few ideas of the types of pages which may be beneficial to include in your blog:

An About Page

It’s almost scripture that a blog should feature an “About” page, so this will probably be the first static page you would like to add to your Blogger blog.

Here you could include general information about your blog’s format, subject matter and any other relevant information which your blog readers will find useful and enlightening to know.

A contact Page

If you would like to provide an accessible method for your readers to contact you, then a “contact page” is a must!

I use Kontactr to generate a Javascript contact form in my Blogger blogs so readers can email me directly from the page. This is a free service which seems to have no limitations on the amount of forms you can create, or the number of emails you can receive.

WebFormDesigner is an alternative solution with much more options for configuration. Again, this is a free service, though I have to say this is not as reliable as Kontactr!

An “About the Author(s)” Page

This would be similar to an “About” page, but with more focus on the blog author (or authors), including any information which adds credibility to your blog.

An Archives Page

This is a little trickier to implement in Blogger as there is no template we can use to add links to previous posts. However, an archives page can prove very useful for your readers in who may wish to read through previous posts or locate an article of interest.

Perhaps the best method you could use to add an archives page in your Blogger blog is to add an archives widget to your sidebar, then copy the links to your archive pages manually into your post page.

I used this method recently to add an archives page for Blogger Buster which also includes links and descriptions of my main categories. If you’re interested to read more about the process I used, take a look at this explanatory article.

A Subscription Page

Having a dedicated subscription page in your blog si a very effective method of converting readers to subscribers.

Here you can add links to your blogs feeds and email subscription page, even including images to add style to the post. Explain to your readers the benefits of subscribing, and highlight the ease of unsubscribing too. For readers who may be unfamiliar with RSS and feed subscriptions, explain what blog feeds are and how they may be of benefit to them.

Tim Ferris presents a great example of a dedicated subscription page by detailing seven reasons for readers to subscribe.

A Popular Posts Page

Highlighting your most popular posts in a page is a useful method of providing value for newer readers, which in turn may offer an incentive to subscribe (or at least stay on your blog for a longer period of time!).

Similarly, a table of contents/important posts could be used as an aid for discovering useful posts which may not otherwise be linked from your home page.

Final thoughts

Once you understand how to create seemingly “static” pages for your Blogger blog, you could indeed choose to link to any important page you like. Such pages are useful to ensure your blog template feels more “polished” and professional, and also helps ensure readers are better able to navigate to important sections of your content.

Have you created “static” post pages in your Blogger blog? If so, what methods have you used to link to these pages? I’m sure other readers of this post may like to see other examples of how this may be achieved, so please feel free to leave your comments below.


Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

25 comments - Leave a reply
  • Posted by Otto Marasco on 28th Apr 2008

    Great post! I thinks I'm going to add a static page or two to my blog. The instructions you provide seen easy enough, except for step 2, that bit about "just before the closing ." I'll have a look to see if we can find this…once again thanks

  • Posted by Deborah on 29th Apr 2008

    Excellent information here as well! I have a blogger blog that I play around with. I'm going to experiment with it later this week based on these ideas! Thanks!

  • Posted by Philip on 3rd May 2008

    Thanks… this is a great post. I searched the whole web for this information, never thought I could only find it here.

  • Posted by Mishbah on 10th May 2008

    Hi,

    Just to let you guyz know it is possible to have a front page in blogger. :smile: See it in action here: http://free-nasheeds4u.blogspot.com/

  • Posted by Jeff on 13th May 2008

    Thanks, but one question. How do you hide the date on those static pages?

  • Posted by Rokchic on 13th May 2008

    Awesome post – thank you sooo much! Although, I made a slight amendment – hope you don't mind. But people may find it helpful – I didn't want the menu ABOVE the header – I wanted it BELOW the header.

    If you want to check it out you can here

    Thanks again, from New Zealand!

    Cheers

    Rokchic

  • Posted by Otto on 15th Jun 2008

    :sad: Not as easy as it seems. Step 2 was the problem, more precisely adding the "the closing tag in your template". Where is this tag ? I even pasted the code in a word document but not even word found .

    Any suggestions anyone or can someone point me to easier instructions on how to create static pages in blogger.

  • Posted by TuxmAL on 3rd Jul 2008

    <cite>Visto che una delle lacune di Blogger era proprio quella di non mettere a disposizione delle pagine statiche,

    Grazie Amanda!

    </cite>

  • Posted by kajdo on 26th Aug 2008

    i think there is a better way to do static content in blogger … watch out my About me Page to get an impression.

    The how-to is still under construction – but i will have a nicer way soon

  • Posted by pakistani on 30th Aug 2008

    wow, nice guide.

    its easy as 1 2 3

  • Posted by pablo on 31st Aug 2008

    once i create a static content page can i then make posts to that page? ie. use it as a category and then have all posts that fit within that category go to that static page??

    thanks

    pablo

  • Posted by pablo on 31st Aug 2008

    once i create a static content page can i then make posts to that page? ie. use it as a category and then have all posts that fit within that category go to that static page??

    thanks

    pablo

  • Posted by Jessica (from It&#03 on 10th Sep 2008

    What a great tutorial!

    However it seems that my header pic is a bit bigger than the template header and it's hiding the link.

    Any chance Rokchick or someone could give me the slight modification so I can put the links BELOW the header?

    Thanks!

  • Posted by Rokchic on 10th Sep 2008

    Hi Jessica,

    Sure, how I did it, was I changed the red code above to:

    <code></code>

    And put it AFTER this part of the code:

    <code>}

    #crosscol ul li {

    display: inline;

    padding: 0 5px;

    }]]>

    <!– skip links for text browsers –>

    skip to main |

    skip to sidebar

    </code>

    (The last line there is our modification)

    Hope this helps – feel free to email me at: deb [at] shaynemalone [dot] com if you want :)

    Cheers

    Rokchic ;)

  • Posted by Karen on 22nd Oct 2008

    I love this idea, but apparently I'm just completely dense when it comes to this type of thing. I thought I put the code just before the but my links are not going horizontal, they are going vertical. Which, really kind of looks lame! How do I fix this?? Thanks so much!!!!! Karen

  • Posted by Karen on 22nd Oct 2008

    Doh- I have no clue what I did differently, but I somehow got it to work!! Thanks, I'm so excited about adding 'pages'!

  • Posted by Lilia on 2nd Nov 2008

    Amanda, thank you so much for this article. It's very helpful for me.

    I come from Indonesia. I am one of teachers at AP. Although I teach the children how to use, treat and repair computers, Blog is a new thing for me. Because of your article, I can understand what Blog is and how to redesign Blog by myself step by step.

    When the boss told me to make an Opening Page, I am very afraid, because I couldn't do it. However, your "Static Page…" article was very helpful.

    Once again, thank you.

  • Posted by src on 6th Nov 2008

    Wouldn't that be simpler to just add a future date to it? :cool:

  • Posted by NotJustAMom on 10th Nov 2008

    Thank you! http://www.bloggingtips.com/wp-includes/images/sm:smile: :smile:

  • Posted by E.K. on 13th Nov 2008

    Awesome, must appreciated. Thank you very much for those simple yet very useful tips!

    EK

  • Posted by Erin on 26th Nov 2008

    Thanks so much for this.

    Is there a way to add pictures (like shown in this blog: http://www.bloggerboutique.com/)across the navigation bar instead of just the words? I would like to create cute tabs for each of the navigations (ie: about, contact me, etc.) I want linked in the navigation bar. Instructions for that would be awesome. Thanks.

  • Posted by Boaz on 1st Dec 2008

    Good post! I was able to use the solution to create an About page in Blogger.

    I was not able, however, to use the solution to create a search results page that will be linked to a Google Custom Search Engine box. Nothing gets rendered on the "static page". When I link the CSE to a page that resides on a different web server, CSE works fine. So I guess we cannot use Blogger for Google Search.

  • Posted by stonesoupcollective on 15th Oct 2010

    can some one tell me where to put the "</b:skin>" I am new at this..thanks

  • Posted by patrimonioindustrialbrasil on 6th Jan 2011

    I really didn't understand step #2

  • Posted by mineral lipstick on 26th Mar 2011

    Good to understand the nitty gritties of the blog page creation.IU have sit with all the steps and get a good handle of the sane.Nice help here.