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

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

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

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

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

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.

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

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

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

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

Share This

Facebook Twitter WhatsApp LINE Google Bookmark