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:

Go to Dashboard > Edit Posts.

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.

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.

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.

(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

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.

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:

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.

I tried to use these instructions but still see the backdated post on the main blog page (complete with date over 40 days ago). The problem may be that I'm using the "new" editor. The options allow a "scheduled" date instead of "automatic". Can't see anything else that could go wrong. Please advise...Although you don't say to I assume after backdating I have to publish as normal, if I don't I can't get a link URL with the draft only.

This a great soulotion to a problem I've been looking at for days now. If I can get it to work!

hola greenlava..i want to ask u, what is static pages really is..?what is it use for and where it usually use at?i'm trying to make my blog just like 'website'but is it possible to make it by using this 'static pages' thing?

Program Sukarelawan Teknologi (PROSTEC),If you want to make your blog looks like a website, then static pages is the thing for you. A static page is a page that does not appear in your blog home page. So it does not move down the homepage when you add in new posts. You usually access the page using a menu tab in the home page. An example of a static page is my Privacy Policy, the link is in the footer.

Btw, is it possible to make the static post stretch across the page once we remove the sidebar widgets? I have a three-column blog. Following your instructions, I hid all of the gadgets and widgets in the right hand column. I'd love to make the post stretch to fill that column to give it more of a full-page look.

graceonline,Thanks for the tweet :)Yes you can stretch the post area by increasing the width of the main wrapper and its child elements leading to the actual post area.You also need to display:none the sidebar wrapper (the outermost sidebar container) to take the sidebar completely off the page.

So far I have loved your tutorials, I made the header bar, but now I am stuck with clearing all the extra elements off of the static page. I pasted the code right before data tag but it still hasn't cleaned up the post.

J and C,I couln't find the static page code inside your template. For me to help you, I have to see the code in action.One more thing, I noticed your blog look a bit messed up. So I checked and found this:

I can't seem to get it to work. I added the code but the sidebar and widgets are still showing. Can you take a look please? I changed "static" to "mapping" but that shouldn't make a difference. Here is the address. http://properties4prosperity.com

All I want is for the sidebar and widgets to be removed when I place a post under "mapping"

Chris,From the weird-looking numbers at the beginning of "Why I became Realtor", I suspect you copy the code direct from the page (i.e the numbered code). The proper way to copy the code is:1. Hover your mouse over the window, three icons will appear on top right of the window.2. Click the leftmost (View source) icon, a window pops-up, displaying the unformatted code.3. Select all and copy.

however, i'm having problems using it. I have a few 'data:post.body/' in my templates hence i'm not sure where should i place the code in. anyway i've tried placing the code below the 'data:post.body/' one by one but it still doesn't work. is it because of the template i'm using? i've searched through all the tutorials on google but don't seem to work.

Thank you so much for this tutorial! I have been on Blogger for just about a year now. I am slowly learning to modify my blog as I come across things I want to change. Not having a static page was an extremely frustrating limitation! After reading (& successfully implementing) your instructions, I am much happier with my blog as I continue to figure out how I want to customize it.

Question I want to start classified ads locally.I have the main page I am working on and have one ad "believe it or not a 1959 Edsel" Location ishttp://bartlettads.blogspot.com

Is there a ready made format I can use for classifieds? Should I go the static page route, or should I have differnt blogs for differnt items? I'd like to keep it as simple as I can. I like to have cars, household items, free, garage sales--you know all the usual categories. All info appreciated. lanahill@att.net

HillBillyFilly,No need to create another blog or to use static page. What you need is:1. To label each post according to its category, for example for the Edsel post, label it "cars".2. Create a button link for each category/label. Use this link format:http://http://bartlettads.blogspot.com/search/label/LABELreplace LABEL with a label. For example for "cars" button, the link should be:http://http://bartlettads.blogspot.com/search/label/cars

What it will do is, when you click the button, all posts labeled "cars" will be displayed.

Linda & Gervin,1. Your static post in homepage dissapeared? That's the whole idea :), to remove static page from homepage and restyle it in individual page.But don't panic, you can prevent it from disappearing. Do this -code line 10 and 11, switch their positions (i.e put code line 10 in line 11 and vice versa).2. You can have as many pages as you like. You can also change existing pages to static page.

see you have two h1 tags, and in CSS you set your logo as a background to header h1 tag. Two h1 tags mean two logos.The second one is clickable because of href='#'. href='#' takes you to the top of the current page (which makes no sense because you are at the top of the page in the first place to be able to click it ). I would suggest you change '#' to 'http://lindagervin.blogspot.com', so that it will direct you to homepage, this is the normal practice.Here's what you do, replace the code above with this one:[div id='header'][h1][a href='http://lindagervin.blogspot.com'][/a][/h1][/div]

2. You can add id to any HTML element. Just make sure it's unique. Try this:[p id='NEW_ID_HERE' class='author']

Good tutorial. It works like a song on my test blog but i can't repeat the same on my actual blog. I want to increase the static page width. Appreciate if you could you could help. Static page is at http://oldieslovesongs.blogspot.com/2009/01/english-love-songs.html

Great tutorial. It was so easy to follow, especially for a lamen who is just getting into blogging like me. I am having one trouble though:

In step 3."style the static page" part 1 where it says "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.". I deleted that part of the code and saved it but I still have the date, comments section, etc. What did I do wrong? http://vettechmel.blogspot.com/

Hi, I'm sorry to bother you again. I replaced the code that I had deleted (line 13), and I still have the date, comments, etc on my static pages. I'm not sure what I am doing wrong here. I've redone it so many times now.

I tried step 2 (is that all you need to do, or do you have to do the entire thing to make a static page?), and it didn't work. First of all, you said to "Copy and use that URL for the tab." What tab? And are you using the old blogger configuration, the one that says "Add page elements" instead of "Add Gadgets"?

I've tried a number of sites, and none of them have helped because they are so unspecific!

Anonymous,I would say step 1 and 2 is a must.The tab refers to a tab in a menu bar. Similar to my tabs under the header (Home, All Posts, FAQs).Try clicking the FAQs tab, you will be taken to a static page titled BoggerSentral FAQs. Notice the different appearance (as compared to other pages)? That's done in step 3.

Hi thanks for this code it is excellent, the best solution I have found to this problem by a long way! A couple of quick questions if I may:

1) It works like a dream except I have a date stamp 'tuesday january 29th' on my homepage where the static page post would have been - is there anyway to remove it?

2) Can more than one 'static' post be linked to the same navigation bar tab?

Thanks for the help!

memmie,
December 30, 2009 at 2:37 PM

I already manage to create my static page. I can click all the static page from the main page. But my problem is, i can't click from static page to see the other static page. For example i have HOME, PROFILE, ACTIVITIES and ALBUMS. I only can access all the static page from HOME page. But from PROFILE i cant click to ACTIVITIES. Everytime i do that the page "couldnt found the page" will appear. I have to return to HOME then i can go to the other static page. Whats wrong i've been done? Thanks.

memmie,You didn't provide your blog url, so I'm guessing here.You use relative urls for the links. Change them to absolute urls, like this link for example:http://bloggersentral.blogspot.com/2009/11/blogger-sentral-faqs.html

I would love your help on trying to eliminate by sidebar and it's widgets from my static pages. I have spent the entire day trying to figure this out and for some reason the code will not hide my sidebar nor it's widgets! Can you please give me some insight?

@Jacquelyn Marie ChiovariI see you've worked it out. I must say the pages looks pretty good, well worth the effort.

Anonymous,
January 15, 2010 at 8:34 AM

Hi

I think I have followed your tutorial correctly - thank you for it (although I haven't formatted the static page yet. But I'm left with a blank page showing just the date where the static page used to be in the sequence of entries.

The site is kevtownsend@blogspot.com. If you click the 'older posts' at the bottom of the home page posting you get a blank page with just the date. It doesn't show up in the edit posts lists.

@AnonymousTry this to remove the date.If the page still appears even after this, you need to go to post editor and backdate the static post.

Anonymous,
January 16, 2010 at 8:33 AM

Thank you.

Anonymous,
January 17, 2010 at 11:29 PM

Thank you - your tip half works :-) It removes the date from the ghost page, but leaves the page now showing just the 'newer', 'home' links. Have you another tip to get rid of these; and is there anyway to get rid of the static page entry in the Blog Archive sidebar widget?

Hello, I am having some difficulty with getting the static page to work as well. My static page is still visable from my homepage and the date and time is still visable as well. I went in a tried to backdate my static page but that still does not solve the problem. Did I copy the HTML code incorrectly?

@AnonymousThat's the best I can come up with right now.As long as the page exists, I don't think we can remove it from Archive widget. Blogger archives posts by posting date. I reckon if Blogger can detect a posting date (meaning a post exists) then it will appear in the Archive."Newer Posts" and "Older Posts" are simply date-bound searches -again posting date comes to play here.

@Stuart1. The sidebar is gone, yet it looks as if it is still there because your post column is right aligned. To position it on the left, add this after code line 15 in step 3:div#main { float:left !important;}2. This is about the membership form right?You need to edit the Zoho iframe code. Try changing scrolling="auto" to "no" and height="500px" to "800px".Good luck

@willyp5Use this code:[b:if cond='data:post.allowComments']PUT ELEMENTS YOU DO NOT WANT TO SHOW IN STATIC PAGES HERE[/b:if]

but using this method you will have to apply the code to each element you want to hide in a static page. Let's say you want to hide 10 elements then you have to find the codes for those 10 elements in your template then enclose them in the if tags, one by one.

Thanks. Your approach is definitely better. The problem I have now is hiding the Linkwithin widget as well as a banner I have at the bottom of the post but above the footer. I had defined the ad as .itemad so I can format it, but including it in line 13 of your code didn't do anything. You can see at blog.lastbash.com. Also, is there a way to hide the static pages from the older pages? What do you think?

@Dan WellsWant't to get rid of the left sidebar? Read this reply, no.1

@willyp5For Linkwithin I use #lws_0.As for the banner you defined the wrong div:{div class='itemad'][/div][div align='center'][a href='http://www.bawineshop.com' target='_blank']...it should be the bottom div, the one with align='center'To hide static pages from archive. Blogger has just introduced guess what? Static Pages in Blogger In Draft.

willyp5,
January 29, 2010 at 2:05 AM

Thanks so much Greenlava! I got the Linkwithin widget to go away but I'm not sure I understand the itemad part. Also, is there a way to move the Linkwithin widget to below the post footer? Feel free to email me directly (email on contact page). Thanks again!

Thanks a lot for all this help. I am currently trying to set up a forum for a blog that is still in the design mode and have copied the codes you provided on how to create a static page and how to move it from the homepage. Unfortunately everything else seems to be working, but the page, which I named "FORUMS" is still on the homepage and all the sidebars are still there. Can you please help me get this up and running so my "FORUMS" page is invisible on the homepage? I really appreciate all the help you've offer so far. You can reach me at JRose733@gmail.com and my blog's URL is http://www.gettickledbyarose.blogspot.com. I would really appreciate your feedback as soon as possible. Thanks a million.

This is probably the best blogger tutorial I have seen - It's much less primitive than any other technique I have seen.I'll probably point to this tutorial from my blogger template from scratch tutorial (This will be much easier then inventing my own technique, and it will save me the need to add to my tutorial a very long section that some people don't need)

Hello Greenlava. Your tutorial is excellent and is working for me. I wonder if you would be generous again and help with an issue. I don't know how to fix it. Look at my static page and you will see my issue. Is it color related?

Hello Greenlava. Apologies for not being clear. In my browser (firefox), the static pages appear to float far left and I would like them to float right. I have made main and main-wrapper the same=width 550. I did this because when I input the correct size for main-wrapper it stretches across the page and looks quite unsightly because of the 2 colours I am using. What I would prefer is to keep it the way it looks now but move the lighter section to center of page.

OK ... everything is working fine ... one question however, how do we format the static page entry title [h3]? (i.e. colour, size &co)... I have tried a thousand ways but can't get it to work... thnx man!!!

You had helped me with the static page hack a couple weeks ago for my blog. The one thing that I'm having an issue with after putting the hack in place is that my older posts/newer posts links on the post page are now misaligned (it's fine on the home page). I'm guessing I need to move the line somewhere else but not sure where. Thanks.

Oh yeah, my site is http://derekandthegang.blogspot.com/, the static page is the forum link at the top of the page, the red button. Any help would be great! (P.s. someone should really make it so you can edit posts you made,)

Sorry I keep posting, but you really need to let us edit posts. Anyways, I also noticed that with the code, my forum hangs dramatically aver the left side of the screen, and i cant even scroll over to see it, any help with my blog will be helpful!

Thank you for this tutorial. This is by far the best static page article, the others on the internet didn't explain how to remove author. I'm really looking to renovate my blogs and make them more functional and this post was quite a help.Thank you so much

this is the problem - I can't get it larger no matter what numbers I put in - thats why I thought it was because I was missing a piece of code. But when I add your.post {width: 640px} (I amended that to 960px) nothing happens it still stays looking like 640. I am finding this the hardest thing I've ever tried to change on my template - normally I've got some degree of success but not with this increasing of the margins. Have you any idea's or should I just give up on making the pages wider?

@RosieWe are talking about the same code right? The code in line 13 to 15?Okay this is your present code:#sidebar-wrapper,#search,.footer-column {display:none;}#outer-wrapper {width: 660px; padding:0;}#main-wrapper{width: 660px; margin: 0;}

to widen the post area to 960px, copy and paste this code to replace the existing code:#sidebar-wrapper,#search,.footer-column {display:none;}#outer-wrapper {width: 980px; padding:0;}#main-wrapper{width: 980px; margin: 0;}.post {width:960px;}

Greenlava This is what is now on my template - in those lines you have mentioned.

and its still the same size on the page - its not changing at all. I would copy and paste the code but the comments section won't allow the tags to be placed in this comments box. If you have any ideas please let me know but I think I might just have to be content with the width it is now.

@RosieApparently you have two styling codes in your template.1. the styling for static page hack -as explained in this tutorial.2. the styling for the real static page -as explained in this article: http://bloggersentral.blogspot.com/2010/02/apply-different-layoutstyling-to-static.html

Your test page is a real static page, so no.2 is applicable.You were changing no.1 all along and I was looking at no.2. No wonder we were getting nowhere.Here's what to do:1. Remove code no.1 -the code you got from this tutorial.2. Edit code no.2 your new widths.

If you use Ctrl+F and enter #main-wrapper, you should find 3 instances.The first one is in the main stylesheet -don't touch this one.The second one is under pageType=='static_page' tag -this one you want to edit.The third one is similar to the code in this tutorial -you want to delete this (the whole code from 1 to 22)

Thats it Greenlava - its working a treat. I made the post page 940px as outer wrapper etc is 960ps. Thankyou so much. Hopefully tommorrow I'll have time to do this on my main blog and get this static pages up and running. Your help is much appreciated.

@AnonymousStatic page is a page is a standalone page, that's not added to recent posts que on your blog home page. (As compared to a post, which is displayed on homepage, and pushed down the page, when a new post is published).

This static/standalone page hack was created before Blogger introduced (static) Pages. The two components of this hack is:1. Hide the static post from homepage, by simply labeling it.2. Format/style the static page differently from regular pages.

Now that you can make real static pages in Blogger, this hack is no longer needed. It will still work though.You can make a Page by going to Dashboard>Edit Posts>Edit Pages and click New Page button.To format/style the added pages, refer to Apply different layout/styling to static pages.

GreenLava

Comments on this post are closed. I am for hire if you need personalized help.