Hide the sidebar, footer and all widgets on Blogger pages-create a simple page

This tutorials explains how to hide the sidebar, footer, even the header if you like, with all their widgets, on specific static pages. The given code will be inserted directly in the static page and will affect only the page it is inserted in. No template editing is needed.

This way you can create a clean, simple page, let's say for a gallery or whatever purpose you need one.
Blogger's flexibility and permission to design your page as you like it is one of the main features for which so many people prefer this platform.

The implementation of the code in this tutorial is much easier and clearer (I hope) but it will change only one single page.
To hide the sidebar and other elements on all pages/posts please go to my two previous tutorials about hiding the sidebar on both layout and designer templates.

With this tweak it is also much easier to create a different design for each of you static pages, with just a few lines of code.

Here we go but first things first:Demo

Hide all widgets contained in header, sidebar and footer

Step 1. Identify your template:

• Go to Design | Edit Html and look for this word in your template with the search feature of your browser (Edit menu | Find or Ctrl+F) "fauxcolumns"


• if you find it, you have a new (designer) template,


• if not, you probably but not necessarily have an older (layout) template.

You will find the code for both template types bellow in differently colored boxes.
Step 2. The basic code:Now that you know your template type, you can select the code that is right for you.
We will hide all widgets in one step by hiding the container they are situated in, like header, sidebars, footer etc.

2.1. Open a static page in the editor or create a new page; work in HTML mode,
2.2. Select from the following two codes the one that is right for your template; the two codes do the same job but the one in the white box is for older (layout) templates and in the yellow box is the code for newer (designer) templates.
If there is only one code than it is the same for both template types.
2.3. Copy and insert one of the following codes directly at the top of your static page, before the content, not in the template, exactly as you see it.

Code for older, layout templates:

<style type="text/css">
/*<![CDATA[*/
#header-wrapper,#crosscol-wrapper,#sidebar-wrapper,#footer {height: 0; visibility: hidden; display:none;}
#main-wrapper{float: none; width: 100%; margin 0; padding: 0;}
/*]]>*/
</style>

Code for new templates:

<style type="text/css">
/*<![CDATA[*/
.header,#crosscol,.main-inner .column-right-outer,.main-inner .column-left-outer,.footer-outer, {height: 0; visibility: hidden; display: none;}
.main-inner .columns {padding-left: 0px; padding-right: 0px;}
/*]]>*/
</style>

Now write your page content if it is a new page, preview and publish or update your page.
The code will produce different results according to your own template but it will affect only the specific page it is inserted in, nothing else. Experiment on a newly created page or on an existing one and customize it to your liking. I've included a few customization ideas in the final code, down the page.  Try them, nothing can go wrong.

We're done here, unless you have widgets to hide in the main area too.

Step 3. Hide all widgets in the main section

What else we may want to hide? In case you have any widgets in the main section that you would like to hide, like ads in widgets or Linkwithin widget, just insert the specific widget id in the same line as the other hidden elements. First you have to find out the id of that widget. These widgets usually don't have a title, so

How to find out the widget id?

To keep it short and easy, open your widget for edit from the quick edit wrench and give the widget a title, let's say "My ads" (temporary). Now save the widget and go to Design |Edit Html. Don't click the expend widget template but find with your browser the new title you just gave the widget. It will look something like this:
<b:widget id="HTML39" locked="false" title="My ads" type="HTML">
There you have your widget id highlighted in red, with its own numbering, of course (not 39). See bellow how to insert it near the rest of hidden elements.

Customize the look of the page - Layout fine-tuning

See how the page looks like and read along for customizing it, if needed, like:

1. Restrict the main area, as now it spreads over the entire width of the page (code for both template types):
   
   .post {width: 80%; margin: 0 auto; padding: 0;}


2. Change the background of the content area and the text color, also add some space around the top of the content:
   
   #main-wrapper{background: #ffffff; color: #000000; margin-top: 100px;}
   .content-inner {background: #ffffff; color: #000000; margin-top: 100px;}
3. Align the title to the center:
   
   .post h3 a {text-align:center; padding:15px;}
   .post-title {text-align:center; padding:15px;}


4. Hide Linkwithin widget: #lws_0


5. In case you see some vertical or horizontal lines crossing the page, those are left over borders from the sidebar or some other element. Check which element has borders and hide them. The example bellow is for the sidebar:
   
   
   #sidebar-wrapper {border: 0;}
   
   .fauxcolumn-left-outer .fauxcolumn-inner { border-right: none; }
   .fauxcolumn-right-outer .fauxcolumn-inner { border-left: none; }

All these customizations are optional and I've included them in the final code, in case your page needs a facelift.

Final code:

<style type="text/css">
/*<![CDATA[*/
#header-wrapper,#crosscol-wrapper,#sidebar-wrapper,#footer,HTML19,#lws_0 {height: 0; visibility; hidden; display:none;}
#main-wrapper{float: none; width: 100%; margin-left: 0; margin-right: 0; margin-top:100px; padding-left: 0; padding-right: 0; background: #ffffff; color: #000000;}
.post {width: 80%; margin: 0 auto; padding: 0;} .post h3 a { text-align: center; padding:15px;}
/*]]>*/
</style>

<style type="text/css"> /*<![CDATA[*/
.header,#crosscol,.main-inner .column-right-outer,.main-inner .column-left-outer,.footer-outer,HTML19,#lws_0 {display: none;}
.main-inner .columns {padding-left: 0px; padding-right: 0px; background:none;} .content-inner {background: #ffffff; color: #000000; margin-top: 100px;}
.post {width: 80%; margin: 0 auto;}
.post-title {text-align:center; padding:15px;}
/*]]>*/
</style>

Select the customizations you like and delete the rest from this final code. All values can be changed (color codes, width, etc.), I highlighted a few of them in blue, you find the rest.

Step 4. Add a menu to this page

But what if you still want a menu somewhere on the page, with a few links?
I added this last optional step as an answer to a reader's question. A very good question indeed!
Please read the next tutorial if you would like to have a few links in a menu, on this simple page.

This would be all for a normal Blogger template.
See also the other two tutorial, mentioned in the first part of this one, you will find many examples, demo pages and also answers to your questions.
If you still have questions, please ask.

Sometimes you want to hide the main widget itself (main section) in order to create a separate archive page or label (category) page.

"The best angle from which to approach a problem is the Try-angle."

~unknown author