Hide the Blogger Sidebar - Quick Tip

Many times when you want a static home page you don't want to see the sidebar widgets. You probably noticed that on my test site for the Static Home Page I was able to hide the sidebar that you normally see on you layout in the blog posting page. Removing this is a simple trick and just requires some basic CSS and Blogger template code to adjust. The key to doing this is to simply use CSS to hide, or, display:none on your sidebars and then adjust the width of your page to fit your design needs.

First step is to just into your Blogger template editor and then choose the 'Edit HTML' button like this:

Click the 'Proceed' button to jump into your template. You don't have to worry about 'Expand Widget Templates' here because we're only working within the CSS section. Seach for the part of your template that has the keyword ]]></b:skin> like this:

You can see the section I've highlighted in my circled region - plus, I've shown about how far down in the template you need to go to find it.
What we're going to do is add some simple template code between the ]]></b:skin> line and the <b:template-skin> line. What you want to pay attention to, however, is the type of template you have - is the sidebar on the right, left or both sides?? Now, this code will only affect your static pages and not the main blog posting page. To test this you'll need to have a static page created ahead of time. We'll come to that in a bit.

Next, copy this code below right between the circled lines above:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <style>
  .sidebar {display:none;}
  #main-wrapper{width: 95%; float: none; margin: 0 auto;}
  .main-inner .column-center-inner {width: 900px;margin-left: 0px;}
  </style>
</b:if>
<b:if cond='data:blog.isMobile'>
  <style>
  .main-inner .column-center-inner {width: 100%;}
  </style>
</b:if>

If you've noticed - I've highlighted two parts in this code - the width: and the margin-left:. This code right now is only setup for a right sidebar.  The pasted code should look like this:

Remember, you'll need a static page to test so your Preview button will only tell you if the pasted code works - you won't see it visually until you navigate to a static page. The key adjustments you'll want to make are now the margin-left and width values I highlighted in the code.

IMPORTANT:
1. If your blog has a right sidebar, then only adjust the width: value to your proper size.
2. If your blog has a left sidebar, then adjust the margin-left: to a negative value depending on your template - such as -200px or -300px. Then adjust your width: value.
3. If your blog has both sidebars do the same as #2 but just reduce the value for margin-left:.

Press the 'Save template' button to save and test your static pages. You'll have to do some trial and error to get the values just right. I know you could use the tempate values of content.width, etc. but many templates are different and you may find that some don't have the standard template variables so fixed values work better for me. One other note - if you noticed, the mobile template must be adjusted as well so as not to have a full fixed content width. Otherwise, it extends too far to the right on a mobile device.

That's it! You're done. All of your static pages will now have full widths across the width of your blog. Enjoy!