Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

Whenever we add a widget/gadget in blogspot blog, widget displayed into the all pages of the blog by default, Including homepage as well. But do you know that AdSense could disable your account in case if you add an AdSense ad unit inside the content of contact
and privacy policy pages. To fix this issue you have to hide AdSense ad widgets from that particular pages. In this article we are going to discuss about the same. Here you will learn how you can hide or show any widget/gadget from any particular pages. To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.
How to Hide or Show Widgets/Gadgets in Blogger?
 
Step : 1 - Go to Blogger Dashboard > Layout > and name HTML/Javascript widget that you have already added in your blog. Now it will be easier for you to find out that widget from blogger's template. make sure that the title you give to the widget it is an unique so that it does not match with any of the titles of any other widgets already added.

Step : 2 - Now go to Template > Edit HTML

Step : 3 - Click anywhere inside the text-area and press CTRL + F to enable search box.

Step : 4 - Find your widget code by typing widget's name in search box.

Now let's take an example of one my widgets in my blog have title with "Recent post" . The code for that widget is similar to this :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

This code represents the widget/gadget that I have added in the Page Elements location (Layout).

Step : 5 - When you've found your widget's code, add the following conditional tags marked with red color just below and above to hide or show the widget from specific pages or posts in Blogger. For instance, in case you want:

To show the widget only in Homepage:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
 </b:if>
</b:includable>
</b:widget>

To show Blogger widget only in post pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To hide Blogger widget in post pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType!= "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show the widget in a specific page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
 </b:if>
</b:includable>
</b:widget>

Note: Replace URL of the page with the address of the page in which you want the widget to appear

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
 <b:if cond='data:blog.url != "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
 </b:if>
</b:includable>
</b:widget>

To show widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
 <b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
 <b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
 </b:if>
</b:includable>
</b:widget>

To show widgets only in Archive Pages
 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Step : 6 - After you have added the conditional tags, Save Template and view your blog.

That's it!