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.

blogger static pageAs 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”.

static post label 

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 configure labels
      3. Untick “static” label check box. select labels
      4. Here is the result: 

        label gadget before label gadget after
        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!

      150 comments to "Creating static pages in Blogger"

      Aero River September 7, 2009 at 1:49 AM    

      Good Tutorial. This will help blogger to make a static page. Thanks

      aR
      Bangla Hacks

      Greenlava September 7, 2009 at 11:47 AM    

      aR,
      I'm glad you found it useful.

      JAWhite September 12, 2009 at 1:26 PM    

      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!

      Greenlava September 13, 2009 at 3:42 AM    

      Hi JAWhite,
      Static pages are "hidden" from homepage by placing them last in posts order. So to make this work you want to have a few more posts to push the static page off from view.

      Termite information October 6, 2009 at 1:07 PM    

      Its very nice and informative article. Its really very helpful in making of a static page. I had bookmarked this page its very useful for me. thanks for that.

      Program Sukarelawan Teknologi (PROSTEC) October 8, 2009 at 4:23 PM    

      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?

      Greenlava October 9, 2009 at 11:16 AM    

      Termite information,
      Thanks for the bookmark.

      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.

      Program Sukarelawan Teknologi (PROSTEC) October 9, 2009 at 1:50 PM    

      can we use static page as the homepage?

      Greenlava October 9, 2009 at 3:01 PM    

      Yes you can.
      Use future date (like year 2020) instead of past date. Then go to Settings>Formatting to set show 1 post on homepage. That way only the futuremost page will be displayed.

      graceonline October 13, 2009 at 12:00 PM    

      Wonderful tutorial! Thank you so much. I tweeted it. When I'm ready to go public with my blog, I'll let you know so you can take a look.

      graceonline October 13, 2009 at 12:03 PM    

      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.

      Greenlava October 13, 2009 at 2:49 PM    

      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.

      Hi there,
      Nice information. i have a blog and i was searching this types information because i need it for my blog. thank you very much for this post.

      Greenlava October 15, 2009 at 2:38 PM    

      You're welcome Logo Designs.

      Lynn Pratt October 21, 2009 at 6:47 AM    

      In step 3, number 5, I can not find data:post.body in my code to place your code before. Where is it in the code? Is there somewhere that I should look, middle, top or something?

      Greenlava October 21, 2009 at 9:24 AM    

      Lynn,
      Have you ticked the Expand Widget Templates check box? If you haven't you won't find it.
      For ease, search using Ctrl+F.

      Patrick October 22, 2009 at 2:40 AM    

      Hi, when trying to style the page, I'm getting a parsing error, saying:

      "The value of attribute "cond" associated with an element type "null" must not contain the '<' character."

      I copied your code directly. Is there some variable I need to change?

      Greenlava October 22, 2009 at 4:33 PM    

      Patrick,
      The only variable that you might want to change is in line 6. But the error came from line 3 or 4.
      I suggest you recopy the code. I don't see anything wrong with it.

      Claudya Martinez October 25, 2009 at 12:12 PM    

      Thank you, thank you, thank you! I've been trying to find a way to do this forever.

      Great instructions! I failed to follow them correctly the first time, but a quick re-read helped me find my error.

      Greenlava October 25, 2009 at 7:31 PM    

      Unknown Mami,
      Glad you found this tutorial useful.

      Remodelaholic October 29, 2009 at 12:54 AM    

      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.

      I would love some help! What info do you need to help me?

      Greenlava October 29, 2009 at 3:55 PM    

      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:

      #header img {
      margin-left: auto;
      margin-right: auto;
      }

      Navigation page element starts
      div id='navibar-wrapper'
      b:section class='navibar' id='navibar' showaddelement='yes'
      /div
      div style='clear: both;'
      Navigation page element ends


      /* Outer-Wrapper
      ----------------------------------------------- */
      #outer-wrapper {
      width: 950px;
      margin:0 auto;
      padding:10px;
      text-align:left;
      font: normal normal 108% Futura Lt BT;
      }

      The culprit is the one in bold (I remove the tags to prevent error here).
      Just delete the line and your layout will return to normal.

      Chris October 30, 2009 at 3:07 AM    

      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"

      Greenlava October 30, 2009 at 3:46 AM    

      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.

      Good luck

      Greenlava October 30, 2009 at 4:14 AM    

      J and C,
      I rechecked and found the code. Why don't you replace it with this one:

      .post-header-line-1, .post-footer, #comments, #blog-pager, .post-feeds, .date-header, #sidebar-wrapper, #HTML1, #lws_0 { display:none !important; } #main-wrapper {width: 980px; }
      #main {width: 900px; margin: 0 auto;}

      this code should remove all except the Adsense ad.

      the.OCTOBER November 2, 2009 at 6:46 PM    

      hi there,

      appreciate your effort on creating this tutorial :)

      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.

      hope you'll be able to help me on this matter :) thanks!

      http://the-octobertest.blogspot.com/

      ferdi kurniawan November 2, 2009 at 7:20 PM    

      I've tried this tips on my blog.
      Anyway, is it possible to make our-own-style URL on blogspot. such as i make the URL shown like this: www.myblog.blogspot.com/staticpage1.html

      Greenlava November 2, 2009 at 10:36 PM    

      october,
      If that's the case, try finding this:
      b:includable id='post' var='post'
      and paste the code below it

      mytheory,
      No, for blogspot, Blogger create the url for you. You have no control over it.

      the.OCTOBER November 2, 2009 at 11:10 PM    

      thanks for your prompt reply! I've tried the method u mentioned earlier but it still doesn't hide from my main page. do enlighten me if you have any idea. thanks :)

      Greenlava November 3, 2009 at 12:30 AM    

      october,
      The code won't hide it from main page. The hiding is done in step 1 -by backdating the post.

      Ralph Buttigieg November 8, 2009 at 4:53 AM    

      G'day.

      I tried your hack but found a weird problem. It hides 1/2 of my blog not just the sidebars.

      see:

      http://discoveryenterprise.blogspot.com/2009/11/thisis-static-page.html

      I would appreciate any help.

      ta

      Ralph

      uthostage November 8, 2009 at 12:49 PM    

      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.

      I tweeted this tutorial. Thank you again!

      Greenlava November 8, 2009 at 1:10 PM    

      Ralph Buttigieg,
      G'day.
      The problem is with the width of main wrapper.
      Try changing code line 14 and 15 with this:
      div#main-wrapper { width: 96% }

      Greenlava November 8, 2009 at 1:47 PM    

      uthostage,
      Welcome to BloggerSentral and thanks for the tweet.
      Click the All Posts tab on the menu bar to see a list of tutorials.

      HillBillyFilly November 10, 2009 at 8:56 AM    

      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 is
      http://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

      Brian Hasbrouck November 10, 2009 at 10:37 AM    

      you rock. thanks, mang!

      Greenlava November 10, 2009 at 7:11 PM    

      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/LABEL
      replace 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.

      Greenlava November 10, 2009 at 7:30 PM    

      Brian Hasbrouck,
      Saw it working on your blog...good job.

      Ted November 12, 2009 at 12:09 PM    

      Hey Greenlava, thanks for taking the time to make this tutorial. :)

      Right now debating between Typepad and staying with Blogger (free!) LOL... one thing I like about Typepad is their ability to EASILY add pages. This tutorial of yours intrigues me.

      Question for you: If I create a page, is it fairly easy to update? I'd like to create a page of tutorials (for crafting) and thought I'd want to update it with links, etc. Your thoughts?

      Thanks much!
      Ted

      Greenlava November 12, 2009 at 5:03 PM    

      Ted,
      You update it just like any other post, via Dashboard>Edit Posts.

      Ted November 12, 2009 at 10:04 PM    

      Wonderful, Greenlava... thank you for taking the time to answer me. I'm bookmarking your site! :)

      Linda & Gervin November 16, 2009 at 3:29 PM    

      Hi Greenlava,

      Thanks for this great site. But SOS! My static homepage disappears after I entered the "hack".

      By the way, is it that we can only create one static page at a time?

      My blog is http://lindagervin.blogspot.com

      Thank you so much for your time..

      Greenlava November 16, 2009 at 7:24 PM    

      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.

      Linda & Gervin November 16, 2009 at 11:27 PM    

      You are so awesome (:

      So am I right to say that it will apply as long as the post is tagged as "static"? So that I can have many "static" pages?

      On a side-note, there's something wrong with my headline logo after applying this. Is it my template or is it the code?

      Thank you for your generous help to us noobies >.<

      Greenlava November 16, 2009 at 11:51 PM    

      Linda & Gervin,
      Yup as long as they are labeled "static" (and nothing else).
      What's wrong with the headline?

      Xander Kroon November 17, 2009 at 6:09 AM    

      Very helpful tutorial, thank you!

      I'm wondering wether it is possible to hide the backdated static pages from the archive widget? Mine are all on the same date. Can this date be excluded?

      thanks!

      Linda & Gervin November 17, 2009 at 4:29 PM    

      There appears to be 2 logos instead of one. Pretty sure I only applied to it once though. It's okay, I'll look at it again..

      Thanks again Greenlava :)

      agitagat November 17, 2009 at 4:48 PM    

      thank's
      it's helping me..

      Greenlava November 17, 2009 at 9:54 PM    

      Xander Kroon,
      I'm afraid I can't help you on that. Tried to, but my brain went numb just by looking at the BlogArchive code :).

      Linda & Gervin,
      I only see one logo.

      agitagat,
      You're welcome.

      Linda & Gervin November 18, 2009 at 1:09 PM    

      Sorry Greenlava, the repeated logo is hidden under the post box. There's a clickable link peeking above the post.

      By the way, can we add an id to something we wish to hide? I'm trying to hide the timestamp and author, but it does not have any id for me to add to the line 13.

      I think this is the code that is missing the id:
      (div class='meta')
      (p class='author')By (data:post.author/) on (data:post.timestamp/)(/p)
      (p class='comments')
      (b:if cond='data:blog.pageType !="item"')

      Greenlava November 18, 2009 at 4:48 PM    

      Linda & Gervin,
      1. Look for this code in your template:
      [div id='header']
      [h1]
      [h1][a href='#'][span][/span][/a][/h1]
      [/h1]
      [/div]

      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']

      Anonymous,  November 18, 2009 at 6:59 PM    

      very useful post this. sorry but how to point the static page to your blog url?
      thanx

      Greenlava November 19, 2009 at 12:12 PM    

      noir,
      You link it via a menu tab, as explained in step 2.

      Unknown November 22, 2009 at 4:22 PM    

      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

      Greenlava November 23, 2009 at 1:52 AM    

      FatLadySing,
      In code line 13, replace
      .sidebar with
      #left-sidebar, #right-sidebar
      In line 14, replace the code with:
      #content, #content2, .post, #inside-content {width:990px;}
      Line 15, replace it with:
      .single-entry {width:950px;}

      Anonymous,  November 23, 2009 at 8:20 AM    

      Greenlava

      thanx 4 the help. beautiful work. i've bookmarked your site

      Mel, RVT November 23, 2009 at 4:02 PM    

      Hi,

      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/

      Greenlava November 23, 2009 at 8:33 PM    

      Mel, RVT,
      You remove the elements by keeping the code (in line 13), not deleting it.

      Unknown November 24, 2009 at 9:01 AM    

      Thanks Greenlava for everything. I also make a mistake in the static page post. Label it as "Static" instead of "static".

      Mel, RVT November 25, 2009 at 3:24 PM    

      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.

      Greenlava November 25, 2009 at 6:36 PM    

      Mel, RVT,
      Your static post is labeled "Static" with capital S. Change it to "static" with lowercase s.

      Anonymous,  December 9, 2009 at 7:45 AM    

      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!

      Greenlava December 9, 2009 at 10:59 AM    

      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.

      Ralph Buttigieg December 14, 2009 at 9:22 AM    

      Dear Greenlava,

      I just want to thank you for your help. Your instructions are by far the best on how to set up pages in blogger.

      Ktynnz December 18, 2009 at 1:49 PM    
      This comment has been removed by the author.
      Greenlava December 19, 2009 at 2:27 PM    

      You're welcome Ralph....

      Ktynnz,
      Could you be more specific?

      Administrator December 22, 2009 at 5:17 AM    

      Hello Greenlava,

      I am trying to add nabble Forum to my blog at
      http://www.oracledatabaseissues.blogspot.com/

      under menu title 'TEST'.. The sidebars are not going correctly. Could you please give a look..

      Administrator December 22, 2009 at 7:46 AM    

      Was able to fix that as well. Please do give a look to my blog at

      http://oracledatabaseissues.blogspot.com/

      thanks for this article.

      Greenlava December 22, 2009 at 1:56 PM    

      Administrator,
      The forum looks great! :)

      Madame K December 25, 2009 at 2:10 PM    

      Can you please tweak my codes for me? I don't know how to hide the timestamp, author, and tags in my static page. Please email me at madame_k@ymail.com, I look forward to your response. :)

      Greenlava December 25, 2009 at 10:52 PM    

      Madame K,
      Your timestamp is inside .post-timestamp, author is in .post-author vcard and tags in .post-labels.
      Place them in front of {display:none !important;}.

      Madame K,  December 28, 2009 at 7:59 PM    

      I can't find the .post-timestamp and that {display: none !importnant;} in my codes.

      Greenlava December 29, 2009 at 2:23 PM    

      Madame K,
      You don't have to find anything, just replace code line 13 in Step 3 no.5 with this one;
      .post-timestamp, .post-author vcard .post-labels {display:none !important;}

      Rob Pattenden December 30, 2009 at 7:58 AM    

      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.

      Greenlava December 30, 2009 at 7:39 PM    

      Rob Pattenden,
      1. It looks like your date-header lies outside of post includable. Try reposition the date-header code into it.
      First backup your template, the find this code:
      [b:if cond='data:post.dateHeader']
      [h2 class='date-header'][data:post.dateHeader/][/h2]
      [/b:if]

      then cut(Ctrl+x) and paste it immediately after this line:
      [b:includable id='post' var='post']
      Preview before Saving.

      2. Read Open multiple links / windows in a single click

      Anshul December 30, 2009 at 7:55 PM    

      Hi Greenlava,
      Thanks for sharing this with us.. i was looking for something like this for past many days.. i implemented it on my blog and it is working fine..

      However there are some small issues..hope you'll help me correct those..

      1) When I click on the static pages from my home page, it displays the label below the post title. How do I remove that ?

      2) I use breadcrumb trail in my blog (adopted from bloggerbuster.com). How do I remove this from static page ?

      3)How do I remove Related Posts from Static pages ?

      4)How to remove Rating Widget (from Outbrain) from Static Pages ?

      As I am new to blogging and don't have much knowledge of html, i request you to help me out with these issues.. Thanks for your time..

      Greenlava December 31, 2009 at 1:15 AM    

      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

      memmie,  December 31, 2009 at 2:23 AM    

      Yes you right genius. I'm using relative urls instead of blog url. My problem solved! Thanks!!!

      Rob Pattenden December 31, 2009 at 9:40 AM    

      WOW!! Thank You!!! Quick and easy fix - you are a genius!!!! Can't wait to try the multiple links method!

      Thanks again!!!!

      Greenlava December 31, 2009 at 5:44 PM    

      Anshul,
      Add these selectors in front of {display: none}
      .post-labels, #places, .similiar, #outbrain_container_0_bottom
      in code line 13.

      Madame K January 1, 2010 at 8:10 AM    

      ackkkkkkkkkkk. Timestamp keeps on showing in my static page.

      JW January 1, 2010 at 9:01 PM    

      Hey, just wonder how to create static page but maintain left or right sidebar?

      Greenlava January 1, 2010 at 9:32 PM    

      Madame K,
      Post your static page url here, maybe I can take a look what's wrong with it.

      Greenlava January 2, 2010 at 12:30 PM    

      JW,
      Just omit .sidebar from code line 13.

      Madame K January 3, 2010 at 1:29 PM    

      http://coffeechiq.blogspot.com/2009/12/whois-me.html

      Thanks.

      Greenlava January 3, 2010 at 2:27 PM    

      Madame K,
      Are you sure you've added the codes? I couldn't find it in the page source code.

      Madame K January 3, 2010 at 3:21 PM    

      Oh. wait..

      Ok, i updated the codes already.

      Eric January 5, 2010 at 3:25 AM    

      I just wanted to say that I think your tutorials are excellent Greenlava, and the additional info you provide so freely in your response to comments make your blog a valuable resource. Two thumbs up!

      Greenlava January 5, 2010 at 11:06 PM    

      Thanks Eric :)...have a nice trip

      Greenlava January 5, 2010 at 11:13 PM    

      Madame K,
      I still can't see the code.

      Unknown January 14, 2010 at 12:42 AM    

      nice tutorials... thx!!!

      Jacquelyn Marie Chiovari January 14, 2010 at 6:22 AM    

      Hello Greenlava

      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?

      My blog is:http://theroyalscoop.blogspot.com/

      Greenlava January 14, 2010 at 3:25 PM    

      @フェブリヤント
      You're welcome

      @Jacquelyn Marie Chiovari
      I 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.

      Is there any way I can remove this 'blank' page?

      Greenlava January 15, 2010 at 12:23 PM    

      @Anonymous
      Try 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 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?

      Airest January 18, 2010 at 10:13 AM    

      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?

      Thanks for your help http:www.thealistbyairest.com

      Academic Writing Blog January 18, 2010 at 2:27 PM    

      Thanks!! I'm still working on my blog, but it's already so much better. This was very helpful. I'll link my students here. Christina

      Greenlava January 18, 2010 at 5:09 PM    

      @Anonymous
      That'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.

      @Airest
      One question: Have you labeled the pages "static"?

      @Academic Writing Blog
      You're welcome

      Stuart January 22, 2010 at 10:17 PM    

      Tried everything butthe sidebar remains! Contents gone though.

      http://cyclingclubhackney.blogspot.com/2010/01/blog-post_21.html

      Stuart January 22, 2010 at 10:19 PM    

      also is it possible to stop the content from scrolling?

      Skeelomano January 23, 2010 at 1:43 AM    

      Thanks a bunch.. Very helpful indeed

      Greenlava January 23, 2010 at 2:39 AM    

      @Stuart
      1. 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

      Greenlava January 23, 2010 at 2:47 AM    

      @Skeelomano
      You're welcome. Datang lagi ye...

      Inspired Robin January 24, 2010 at 8:59 AM    

      Wow very nice! Thank you. Will be great for my blog!

      Lana,  January 26, 2010 at 12:10 AM    

      Excellent article! Thanks, @Greenlava. I was searching for something like this for months.

      willyp5,  January 27, 2010 at 1:17 PM    

      How would I modify the code above if I want to distinguish the static pages from regular posts by the fact that comments are not enabled for static pages? Thanks!

      Greenlava January 27, 2010 at 5:11 PM    

      @willyp5
      Use 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.

      Dan Wells January 27, 2010 at 11:40 PM    

      Fantastic! Very helpful. Now I get to play with it.

      willyp5,  January 28, 2010 at 1:39 AM    

      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?

      Greenlava January 28, 2010 at 4:33 PM    

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

      @willyp5
      For 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!

      Greenlava January 29, 2010 at 12:25 PM    

      @willyp5
      Regarding .itemad, this is your code (replace [] with <>):
      {div class='itemad'][/div]
      [div align='center']
      [a href='http://www.bawineshop.com' target='_blank']...

      you give class to an empty division, that's why it doesn't work. It should be like this:

      {div][/div]
      [div class='itemad' align='center']
      [a href='http://www.bawineshop.com' target='_blank']...

      I don'r think you can move the Linkwithin, it's programmed that way.

      Mrs. Rose January 30, 2010 at 3:58 AM    

      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.

      Greenlava January 30, 2010 at 3:43 PM    

      @Mrs. Rose
      I don't see any "FORUMS page. I can't check what I can't see.

      LightningIsMyName February 5, 2010 at 7:10 PM    

      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)

      Again - an excellent tutorial! Much appriciated

      Anonymous,  February 7, 2010 at 7:46 PM    

      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?

      http://sheldon-equilibrium.blogspot.com/2006/01/archives.html

      Anonymous,  February 7, 2010 at 8:04 PM    

      btw Greenlava...you have been tweeted and stumbled :)

      Greenlava February 8, 2010 at 1:08 AM    

      @Sheldon
      I'm looking at the page...and wonder what the issue is? Could you perhaps shed some light on it?

      Anonymous,  February 8, 2010 at 5:34 AM    

      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.

      Greenlava February 8, 2010 at 10:31 AM    

      @Sheldon
      Add this inside #main-wrapper in line 14:
      float: none;margin: 0 auto;

      Anonymous,  February 8, 2010 at 10:02 PM    

      Ah...excellent. Thank you my friend. It looks absolutely perfect :)

      I will do what I can to share the linklove. Your instructions and patience are worth it and I will recommend your site at every opportunity.

      Thank You!

      TANN February 26, 2010 at 3:08 AM    

      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!!!

      Beth February 27, 2010 at 12:39 AM    

      Maybe you can help me. I had added the pages but what I really need is to center the links (added static pages) under my header. They are currently left align.

      I have been trying to find the code but I can't find that either.

      Here's the site: www.robbethjames.blogspot.com

      lastbash1 February 27, 2010 at 4:04 AM    

      Hi Greenlava,

      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.

      Greenlava February 27, 2010 at 10:10 AM    

      @Sheldon
      Thanks

      @Ioannis G.
      Add this after code line 15:
      .post h3 {font-size:SIZE_HERE; color:COLORCODE_HERE;}

      Greenlava February 27, 2010 at 10:51 AM    

      @Beth
      Try adding this before ]]>

      #PageList1 ul {width:580px; margin-left:auto;margin-right:auto;}

      Greenlava February 27, 2010 at 11:04 AM    

      It has nothing to do with the hack. Anyway read my reply to a similar question here

      Beth James February 27, 2010 at 12:46 PM    

      Thank you SOOO much. You are a lifesaver!! It worked.

      Again, thank you!

      derek March 8, 2010 at 2:35 AM    

      I put in the code, but all my widgets and gadgets still appear, any help?

      derek March 8, 2010 at 4:07 AM    

      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,)

      Thanks in advance
      DB

      derek March 8, 2010 at 4:24 AM    

      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!

      Greenlava March 8, 2010 at 4:16 PM    

      @derek
      Try setting the main width to 680px:
      #main {width: 680px; margin: 0 auto;}

      "you really need to let us edit posts" -yeah I agree, Blogger should make this possible.

      Ruben Marcus Luz Paschoarelli March 12, 2010 at 8:57 AM    

      Hi Mate. Very Useful tutorial but, could I use as wordpress does, select form just one category (onelabel) to show on homepage?? is that possible?

      Greenlava March 13, 2010 at 10:47 PM    

      @Ruben Marcus Luz Paschoarelli
      I'm afraid that's not possible. Homepage always display the most recent posts regardless of label.

      Jenny March 16, 2010 at 6:06 PM    

      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

      Greenlava March 17, 2010 at 9:41 AM    

      @Rosie
      Your blog is set to private. Pls make it public if you want me checking it.

      Rosie Nixon Fluerty March 17, 2010 at 11:39 PM    

      so sorry Greenlava _ I forgot that my testblogs were on private

      you can access it here now
      http://lnbtest-leavesnbloom.blogspot.com/p/testing-testing.html

      Greenlava March 18, 2010 at 10:16 PM    

      @Rosie
      I see you set pages' main-wrapper to 660px.
      You need to add this:
      .post {width: 640px}

      the 20px difference is due to 10px (left and right) paddings.

      Rosie March 19, 2010 at 1:53 AM    

      Hi Greenlava - when you viewed the blog the settings were:

      #main-wrapper {width: 980px; }
      #main {width: 980px; margin: 0 auto;}

      and it still looks like 660! - and you thought it was too.

      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?

      Greenlava March 19, 2010 at 2:32 AM    

      @Rosie
      We 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;}

      Rosie March 19, 2010 at 3:30 AM    

      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.

      Greenlava March 19, 2010 at 4:08 AM    

      @Rosie
      Apparently 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)

      Rosie March 19, 2010 at 6:19 AM    

      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.

      Anonymous,  May 6, 2010 at 6:51 AM    

      What IS a static page?

      Greenlava May 6, 2010 at 4:46 PM    

      @Anonymous
      Static 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).

      bleep May 6, 2010 at 6:09 PM    

      i tried this but it didn't work. the line 1 had been replaced with the provided code but it still appears in my homepage. are u sure i will replace that with just one line?

      i really would want it to work, please assist me. thanks.

      Greenlava May 6, 2010 at 7:35 PM    

      @bleep
      Sorry I just could not understand what your problem is.
      Anyway rather than using this static page hack, you'd better off adding Pages and use Apply different layout/styling to static pages to style it.

      Greenlava May 6, 2010 at 8:19 PM    

      @All readers
      I am closing the comments for this post.

      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