Conditionally Hide Blogger Sidebar(s)

I was just trying out the new Blogger Pages feature and one of the first things I wanted to do was hide one or both sidebars. In my previous post, I showed how to use conditional code blocks in the template to add unique meta tags to Blogger Pages, which lack labels and categories.

It occurred to me that a simple conditional code block could hide one or both sidebars for a particular Blogger Page, too. It works! I did have to adjust my template to make the center column liquid instead of a fixed width. Doing so allows content to flow outward into space previously occupied by the sidebar. Otherwise, the page would have a blank sidebar with an unchanged center column. I've described changes I made to my Minima template below, in case you want to try it on your blog.

Take a moment to back up your template before making changes to it!
Remember that the changes I describe apply to a 2-column or 3-column Minima template. If you are using a different template, this method may not work without adjustments, or at all. The new "Blogger in Draft" templates use positioning instead of floats for the layout. If you are using a "Blogger in Draft" template, please see these instructions.

Hide the sidebar

Enclose the #sidebar-wrapper div in a blogger conditional tag and make the condition NOT equal to the Page URL. We don't want to hide the sidebar on any page except our "special" one. The pattern is:

<b:if cond='data:blog.url != "http://blogname.blogspot.com/p/page-title.html"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
[...other sidebar widgets...]
</b:section>
</div>
</b:if>

Remember to replace "page-title.html" in the code with your Page's actual title. Note that blogger changes double quotation marks around the page URL to the entity " when you save the template. The code still works, so don't worry about it.

When you test the new blogger conditional with your Page, the sidebar should be missing. The main column's content will not flow into the empty space until we make a few simple changes to the template layout.

Edit the Minima template

I moved the #main-wrapper div below both of my sidebars, which float left and right:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
 [sidebar content]
</b:section>
</div>

<b:if cond='data:blog.url != "http://blogname.blogspot.com/p/page-title.html"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
[sidebar content]
</b:section>
</div></b:if>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Next I removed the float and width from the #main-wrapper div, so that it would flow between them, and changed margins to padding, which works better with floats.

That is, I replaced this:

#main-wrapper {
width: 505px;
margin-left: 30px;
margin-right: 30px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

With this [I actually commented out the original lines, but for clarity, they are omitted here]:

#main-wrapper {
padding-left: 30px;
padding-right: 30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Since first publishing this post, I changed my template from Minima to Picture Window, a much more complex template that uses positioning instead of floats for the layout. The simple CSS used to modify the Minima template does not work with Picture Window. In this template, I was able to hide the sidebar by conditionally appending CSS styles that modify the template section widths and hide the right outer sidebar. View the result on the Real Tea page, where I added an Amazon aStore, because making one fit in Blogger is a question that is raised daily. This aStore fits with only one sidebar hidden because I used (one of my own) narrower aStore "shared templates".

I highly recommend editing the aStore <iframe> tag to modify width="100%" to the actual width of the aStore + 17px (for the vertical scrollbar). My aStore <iframe> has a specified width of 697px (680px + 17px). Doing this prevents the aStore from sliding under the sidebar.

If you want to use a narrower template in order to preserve one of your sidebars on the aStore page, here's how. First, edit your aStore on Amazon and in Step 2 - Color & Design, jot down your color theme name and/or your custom colors or Print Screen and view in Paint. Then click Shared Templates and select one of the templates with "Narrow" or "Skinny" in the title. Some time ago, I added three templates to the Shared Template list: Narrow Red Centered, Narrow Earth, and Narrow Blue Centered, which are all 680px wide, not including a 17px vertical scrollbar that will appear on long pages. After you apply a shared template, change the colors back to your original color theme. Doing so will not affect CSS styles in the shared template that make it narrower.