Hide and Show Blogger Widgets

You may have noticed that all the widgets (or gadgets) you add to your blog, will be displayed on all pages by default. But it is really important to have control over the showcase of various widget in blog page because some widgets are actually meant for some specific pages. Hiding certain element inside your blog pages is not only a matter of design, but sometimes it is very much necessary. For example, 'Share Post' widget should be displayed in every pages except home page and static pages because it doesn't make much sense when 'Share Post' widget are displayed in home page of your blog.
This tutorial will show you how to show/hide a widget in blogger. You can even control blogger official widgets like 'About Me', 'Labels', 'Popular posts' etc,. Now in order to do this, you have to enclose those widgets within a few codes. But before I show you the codes, I have to clarify few things about blogger.

<data:/> tag

Undoubtedly this is the most important tag in 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're dealing with four types of pages.

Home page

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 static pages. To select those 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.

Backup your blog template before you proceed.

1. Go to 'Blogger' dashboard.
2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' from the drop-down menu list.
3. Click on 'Edit HTML'.
4. Search for (Ctrl+F) the title of that specific widget you want to control. You'll find a code similar to the following.

<b:widget id='HTML' locked='false' title='WIDGET-TITLE' type='WIDGET-TYPE'> 
  <b:includable id='main'>
    WIDGET CODE
  </b:includable> 
</b:widget>

5. Choose your desired option from the followings and enclose WIDGET CODE as specified.

Show widgets only on homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  WIDGET CODE
</b:if>

Hide widgets only from homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  WIDGET CODE
</b:if>

Show widgets only on static page

<b:if cond='data:blog.pageType == "static_page"'>
  WIDGET CODE
</b:if>

Hide widgets only from static page

<b:if cond='data:blog.pageType != "static_page"'>
  WIDGET CODE
</b:if>

Show widgets only on item page

<b:if cond='data:blog.pageType == "item"'>
  WIDGET CODE
</b:if>

Hide widgets only from item page

<b:if cond='data:blog.pageType != "item"'>
  WIDGET CODE
</b:if>

Show widgets for a particular post

<b:if cond='data:blog.url == "URL of that particular post"'>
  WIDGET CODE
</b:if>

Hide widgets for a particular post

<b:if cond='data:blog.url != "URL of that particular post"'>
  WIDGET CODE
</b:if>

When you're done, it will look like following.

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

I've tried my best to keep things as simple as possible. Any question related to this will be welcomed. Enjoy !