UPDATED: How to Remove the Side Bars from Your Pages in Blogger

Many people who use Blogger have noticed Blogger is starting to phase out the old templates. I removed side bars very easily on January 5, 2011, I had the Mimina Blog Template. I have been looking to make the switch to one of the new templates for many reasons — one is the ease of changing the background, and two, because I have been having extreme difficultly with the layout feature – I kept getting errors. Last night I made the switch to the Watermark Template – I customized everything and realized the static pages were all messed up. I decided to mess with it later. I was tired and wanted to go to bed. This morning I woke up and started hunting for the code. I wanted the code to go directly on the page like before, but that did not work for me. I had to modify the template itself. I always back up my blog before touching HTML code (I have destroyed it too many times not to).

I found an amazing site, Greene Teapot, where she had the code to remove one sidebar but not the other (please keep in mind it took me two hours to figure this fact out). The following code is for a 3 column Watermark Template – I do NOT know if it will work on any other template. I took the original code from Greene Teapot pasted it into Text Edit (Word Pad in Microsoft) and made my changes:

<b:if cond=’data:blog.url == “http://www.ADDRESS OF THE PAGE YOU WANT MODIFIED.html“‘>
<style type=’text/css’>
      .main-inner .columns {
        padding-right: 0;
      }
      .main-inner .fauxcolumn-center-outer {
        right: 0;
        _width: expression(this.parentNode.offsetWidth –
            parseInt(“$(main.column.left.width)”) + ‘px’);
      }
      .main-inner .fauxcolumn-right-outer {
        width: 0px;
      }
      .main-inner .column-right-outer {
        width: 0px;
        margin-right: 0;
        display: none;
      }
</style>
</b:if>
<b:if cond=’data:blog.url == “http://www.ADDRESS OF THE PAGE YOU WANT MODIFIED.html“‘>
<style type=’text/css’>
      .main-inner .columns {
        padding-left: 0;
      }
      .main-inner .fauxcolumn-center-outer {
        left: 0;
        _width: expression(this.parentNode.offsetWidth –
            parseInt(“$(main.column.right.width)”) + ‘px’);
      }
      .main-inner .fauxcolumn-left-outer {
        width: 0px;
      }
      .main-inner .column-left-outer {
        width: 0px;
        margin-left: 0;
        display: none;
      }
</style>
</b:if>

I added an additional code right below the first code and changed everything from right to left and it worked. You will need to add the address to the page you want to modify or it will not work.

I then went into BLOGGER: Design –> Edit HTML –> Expand widgets –> found this code: </b:template-skin> and place the above code in between that and the </head>

You will need to do this for each page you do not want the side bars to display on. I put one right after another and it worked fine make sure it is between: </b:template-skin> and </head>.

I hope this helps anyone who is looking to take the sidebars off of their pages. I hope it does not take you as much time and frustration as it did me.