How to hide / Show Blogger Widgets/Gadgets In Home Page, Post, Static Pages, Archive Page etc.

Blogger allows various gadgets or widgets to be included in Blogger blog. Also, apart from the default Blogger widgets, we can also include HTML or JAVASCRIPT codes in Blogger blogs. At times, we may not like to display the widget on all pages. Instead, we may want to hide widgets on certain pages. In this post, we shall see how to 'Hide / Show Blogger Widgets/Gadgets In Home Page, Post, Static Pages, Archive Page etc.'

Suppose we added a Popular Post Blogger Gadget/Widget in a Blogger Blog. And we want to display the Popular Post Widget only on the home page but not on any other pages. Then we can use Blogger conditional code to control the display of the widgets. Similarly, we can use Blogger conditions to display or hide on others.

For the purpose of this example, let's assume the following steps:

1) Login to Blogger and navigate to LAYOUT
2) Click "Add a gadget" and add a new POPULAR POSTS gadget anywhere desired
3) Save the arrangement
4) Navigate to Template /  Theme
5) Click on EDIT HTML
6) Click JUMP TO WIDGET and click on the POPULAR POSTS gadget
This will take us to the code for the POPULAR POSTS gadget.
7) In the code section for the POPULAR POST widget, find "<b:includable id='main'>".
Every Blogger gadget will have <b:includable id='main'> section.

8) Right after the <b:includable id='main'> statement, include a Blogger condition.
9) Right before the end of the 'includable' black for main - '</b:includable>', add the end of the Blogger IF condition.



Blogger Conditional Tag
Blogger Conditional Tag syntax looks like this:

<b:if cond='ADD_CONDITION_HERE'>
ADD CONTENT HERE
</b:if>

• The Blogger conditional tags syntax start with <b:if> tags and a cond attributes. 
• Condition need to entered as the value of the cond attribute. 
• Every opening  <b:if> tag need to be closed with a closing </b:if> tag.

If the above condition is met, the content in between is display or the code in between is executed. 



Various ways to display content using Blogger Conditional Tags: 

Now, depending on our requirement, various Blogger conditions can be used to display the POPULAR POSTS gadget on various types of pages or URL.

1) Display only on Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ADD CONTENT HERE
</b:if>

<b:widget id='PopularPosts2' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts' visible='true'>
<b:widget-settings>
.........................
.........................
</b:widget-settings>
<b:includable id='main'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
                <b:comment>Default the title to &#39;Popular posts from this blog&#39;.</b:comment>
            <b:with value='data:messages.popularPosts' var='defaultTitle'>
            <b:include name='super.main'/>
          </b:with>         
    </b:if>
</b:includable>
..........
..........
</b:widget>

2) Display on Blog Post/Article Page

<b:if cond='data:blog.pageType == "item"'>
ADD CONTENT HERE
</b:if>

<b:widget id='PopularPosts2' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts' visible='true'>
<b:widget-settings>
.........................
.........................
</b:widget-settings>
<b:includable id='main'>
   <b:if cond='data:blog.pageType == "item"'>
                <b:comment>Default the title to &#39;Popular posts from this blog&#39;.</b:comment>
            <b:with value='data:messages.popularPosts' var='defaultTitle'>
            <b:include name='super.main'/>
          </b:with>         
    </b:if>
</b:includable>
..........
..........
</b:widget>

3) Display on Index Page
By Index pages, it include homepage, label page, search page and yearly archive page.

<b:if cond='data:blog.pageType == "index"'>
ADD CONTENT HERE
</b:if>

<b:widget id='PopularPosts2' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts' visible='true'>
<b:widget-settings>
.........................
.........................
</b:widget-settings>
<b:includable id='main'>
   <b:if cond='data:blog.pageType == "index"'>
                <b:comment>Default the title to &#39;Popular posts from this blog&#39;.</b:comment>
            <b:with value='data:messages.popularPosts' var='defaultTitle'>
            <b:include name='super.main'/>
          </b:with>         
    </b:if>
</b:includable>
..........
..........
</b:widget>

In a similar way, we can use the following Blogger Conditional Tags to display on:

4) Display on Static Pages
Static pages are blogger pages which are created from blogger page section.

<b:if cond='data:blog.pageType == "static_page"'>
ADD CONTENT HERE
</b:if>

5) Display on Post and Static Pages

<b:if cond='data:blog.url == data:post.url'>
ADD CONTENT HERE
</b:if>

6) Display on Label and Search Pages
Label or search pages are Blogger pages which are displayed when labels are clicked or when search terms are used.

<b:if cond='data:blog.searchLabel'>
ADD CONTENT HERE
</b:if>

7) Display on Specific Label
To display Blogger widgets on certain label page, we can use the name of the label as in the example code below. NOTE: label names are case sensitive.

<b:if cond='data:post.labels any (l => l.name == "LABEL_NAME_HERE")'>
ADD CONTENT HERE
</b:if>

8) Display on Archive Pages
Archive pages are pages displayed by Blogger when a visitor clicks on a particular archive link such as a particular month or year. Archive pages displays content from a particular period.

<b:if cond='data:blog.pageType == "archive"'>
ADD CONTENT HERE
</b:if>

9) Display on Specific page/URL
To display Blogger widgets on certain page URL, we can use the URL at 'URL_HERE' in the example code below.

<b:if cond='data:blog.url == "URL_HERE"'>
ADD CONTENT HERE
</b:if>

10) Display on 404 Error Page
404 Error Page is displayed when a particular page is not found.

<b:if cond='data:blog.pageType == "error_page"'>
ADD CONTENT HERE
</b:if>

Blogger Multiple Conditional Tags
If you need to use multiple conditional tags, you can include <b:else/> tag. If first condition is not met then any content withing the first condition block is ignored and the content in the second ELSE block is honored.

<b:if cond='data:blog.pageType == "item"'>
CONTENT TO APPLY IF ABOVE CONDITION IF TRUE
<b:else/>
CONTENT TO APPLY IF ABOVE CONDITION IF FALSE
</b:if>

 Blogger Negate Conditional Tags
To reverse or negate any of the above Blogger conditional tags, we can do it by changing comparison operator from == (is equal to) to != (is not equal to).

<b:if cond='data:blog.pageType != "item"'>
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE  - THAT IS IF THE BLOG PAGE TYPE IS NOT EQUALS TO ITEM TYPE)
</b:if>