How to Hide Sidebar on Certain Pages in Blogger

If you Search Tutorial to remove Sidebar, it will gave you some css code with display:none. it work, but did you know that its wrong way.

"display" is not just another visual attribute. It establishes the entire rendering mode of the element, such as whether it’s a block, inline, inline-block, table, table-row, table-cell, list-item, or whatever! Each of those have very different layout ramifications.

As the title say to "Hide", its true with display:none your section will hide, but if you look  at your page source code, the element is still there, it just hide from reader but it will keep load when reader load pages. Imagine if you have tons sidebar widget and you want to hide its sidebar as a result increasing in loading speed! it will not work.

The right way is to remove your sidebar completely, and this is how we should do.

Every widget in blogger hosted inside <b:section> tags, and your sidebar is an section box contain all your sidebar widget. go ahead look at your "Theme - Edit HTML" and find your sidebar section.  we can hide this section with some condition.

Example sidebar section tag code

<b:section class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

       <b:widget>

            ...

       </b:widget>

</b:section>

The Sidebar section will be easily found by going to 'Layout' and see what our sidebar section is named.

Now, in HTML edit mode search for the name. In above image, sidebar name is 'sidebar-right-1'. Once found we can give some Conditional statement like example below.

The Conditional Attribute Implementation

REMOVE SIDEBAR FROM HOMEPAGE

<b:section cond='!data:view.isHomepage' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

REMOVE SIDEBAR FROM STATIC PAGE

<b:section cond='!data:view.isPage' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

REMOVE SIDEBAR FROM URL CONTAIN WORD 'SEARCH'

<b:section cond='!data:view.isSearch' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

REMOVE SIDEBAR FROM HOMEPAGE AND STATIC PAGE

<b:section cond='!data:view.isHomepage or !data:view.isPage' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

With Logical Operator 'or' we can give two or more condition.

Examples - Remove Sidebar from specific blog Page / Post

Note: When you create post or page, look at your Browser address bar to get postID or pageID of the page or post and replace with the number in the example below.

REMOVE SIDEBAR FROM ARTICLE OR POST

<b:section cond='data:view.postId != 123456' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

REMOVE SIDEBAR FROM A STATIC PAGE

<b:section cond='data:view.pageId != 123456' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

REMOVE SIDEBAR IN MULTIPLE SELECTED ARTICLES

<b:section cond='data:view.postId not in [123456,234567,345678]' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>

REMOVE SIDEBAR IN SEVERAL STATIC PAGES

<b:section cond='data:view.pageId not in [123456,234567,345678]' class='sidebar' id='sidebar_feed' name='Sidebar' showaddelement='yes'>