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 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

Note: When you create post or page, look at your browser address bar to get postID or pageID of the page or post.
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'>

Share This

2 comments:
  1. This comment has been removed by the author.

    ReplyDelete
  2. Where to paste these codes inside blogger theme?
    There are lots of coding, where to paste your codes to hide sidebar from static pages?
    Please step by step instruction needed

    ReplyDelete

About
Creative Commons License
Blogger Book is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Misc