Show and Hide Blogger Widgets (Including Official Widgets)

You may have noticed that all the widgets (gadgets) you add to your blog, will be displayed on all the pages by default. But it is really important to control various widget display in blog page because some widgets are actually meant for some specific pages. For example, 'share widget' should be displayed in every pages except home page and static pages. It does not make any sense when 'share widgets' are displayed in home page of your blog. Also hiding certain elements inside your blog pages is not only a matter of design, but sometimes it is also a requirement. Now in order to do this, you have to enclose those widgets within a few codes. Don't panic. It is very simple.
Before I show you the codes, I have to clarify few things about blogger.

♦ The data tag

Undoubtedly this is the most important tag for blogger. It is generally expressed as <data:name1/> or <data:name1.name2/> where name1 is a particular piece of data and name2 is particular item within a set of data.
Example: <data:description/> or <data:photo.url/>

♦ Types of pages

Mainly we are dealing here four types of pages.

♦ Home page

Obviously you know which one is the Homepage. The one that contains several posts along with their summery and url of that page which is same as your blog url. But what you have to know that how a homepage of a blog is expressed in data tag. Well, blogger provides a globally available data to define your blog homepage and it is data:blog.homepageUrl

♦ Static page

You may have noticed that blogger offers you to add several pages to your blog. Those pages are known as static pages. To select these blogger static pages, the globally available data:blog.pageType == "static_page" is used.

♦ Item page

Item pages are individual blog post pages. To navigate these item pages, blogger provides another globally available data, data:blog.pageType == "item" .

♦ Current page

The page you are browsing right now. In blogger, data:blog.url indicates url of current page.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.
Don’t get scared. Just stay serious.

Let's proceed. Everytime enclose your widget code within these codes.

Show widgets only on homepage

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    widget code goes here
    </b:if>
  

Hide widgets only from homepage

    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    widget code goes here
    </b:if>
  

Show widgets only on static page

    <b:if cond='data:blog.pageType == "static_page"'>
    widget code goes here
    </b:if>
  

Hide widgets only from static page

    <b:if cond='data:blog.pageType != "static_page"'>
    widget code goes here
    </b:if>
  

Show widgets only on item page

    <b:if cond='data:blog.pageType == "item"'>
    widget code goes here
    </b:if>
  

Hide widgets only from item page

    <b:if cond='data:blog.pageType != "item"'>
    widget code goes here
    </b:if>
  

Show widgets for a particular post

    <b:if cond='data:blog.url == "URL of that particular post"'>
    widget code goes here
    </b:if>
  

Hide widgets for a particular post

    <b:if cond='data:blog.url != "URL of that particular post"'>
    widget code goes here
    </b:if>
  

Control blogger official widgets

To control official widgets of blogger like 'About Me', 'Labels', 'Popular posts' etc, follow the instruction below.

1. Go to 'Template' and click 'Edit HTML'.
   
2. Make sure that 'Expand Widget Templates' is checked.
3. Search for (
   Ctrl
   +
   F
   ) the title of that specific widget you want to control.
4. You will find a code of that widget similar to this one

   
   <b:widget id='HTML' locked='false' title='WIDGET_TITLE' type='WIDGET_TYPE'> 
   <b:includable id='main'>
   WIDGET CODE
   </b:includable> 
   </b:widget>
   

5. Add the controlling code i.e. b:if tag within that highlighted b:includable tag. When you are done it will look similar to this

   
   <b:widget id='HTML' locked='false' title='WIDGET_TITLE' type='WIDGET_TYPE'> 
   <b:includable id='main'>
   <b:if cond='VARIOUS CONDITIONS (DESCRIBED EARLIER)'>
   WIDGET CODE
   </b:if>
   </b:includable>
   </b:widget>
   

I tried my best to keep things as simple as possible. If you have any questions on this, please let me know. Enjoy !