How to Show and Hide Widgets in Blogger?

How To Display a Certain Gadget on Specific Pages?

1. How to Display a Widget only on Homepage?

Just paste the HTML/JavaScript or CSS Coding between these lines. It will show the gadget only on the homepage of your website. It would hide the gadget from Post pages and static pages.

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

WIDGET CODE GOES HERE

</b:if>

2. How to Hide a Widget on Homepage?

The following coding can be used if someone wants to restrict/hide a widget from the homepage of his site. Just add your HTML gadget coding between two lines. It would show the gadget on each and every page except homepage.

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

WIDGET CODE GOES HERE

</b:if>

3. How To Display a Widget only on Posts?

If anyone wants to show a gadget only on post pages, then use the following coding. By using the following coding the gadget would only appear on your Posts.

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

WIDGET CODE GOES HERE

</b:if>

4. How To Display a Widget on Static pages?

If anyone wants to hide a gadget from his Static pages then, he can use the following coding. It would appear only on Static Pages.

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

WIDGET CODE GOES HERE

</b:if>

5. How to display a Widget on Archive pages?

If anyone desires to show a gadget on Archive pages of your website then, use the following coding. It would hide it from each and every page, expect the archive pages.

<b:if cond='data:blog.pageType == "archive"'>

WIDGET CODE GOES HERE

</b:if>

6. How to display a Widget on Homepage and Post Pages?

Sometime, we desire to show certain HTML Coding on the homepage and posts. In this case, use the following coding and it would hide the gadget from Static pages. However, it would keep on appearing on Home and posts of your site.

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

WIDGET CODE GOES HERE

</b:if>

7. How to Display a Widget on Homepage and Static Page?
Apply the same instructions over here. It should hide the gadget from posts of your site. However, it would continue to display them on home and static pages.

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

WIDGET CODE GOES HERE

</b:if>

8. How to Display a Widget on Posts and Static Pages?
By using this coding the gadget would appear on Posts and Static pages. However, it would remain hidden from homepages.

<b:if cond='data:blog.pageType != "index"'>

WIDGET CODE GOES HERE

</b:if>

How To Control Blogger's Official Widgets?

We can apply the same procedure on Blogger's Official widgets. In fact, these condition is applicable through out the blogger platform. Which means, we can use these conditions during our Posts, Layout and etc. For Controlling widgets do as followers.

Go to Blogger >> Template >> Edit HTML >> Proceed.
Check the Expand Widgets Templates Box
Search for the title of the widget you want to control
The code which you would find might look something similar to this one,

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>

Widget CODE (Large Chunk)

</b:includable>
</b:widget>

On finding the coding as mentioned above, you have to Add <b:if> conditions just between these two tags <b:includable id='main'></b:includable> . After adding the <b:if> conditions the coding would look something similar to this one.

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>

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

</b:includable>
</b:widget>

All Done: That's it, Save the template by pressing "Save Template Button". We hope this technique would help everyone to improve their site speed by restricting unused widget on certain pages. Feel free to leave your comments and suggestion, Till then Peace, Blessings and happy blogging.