How to Hide or Display Blogger Widgets in Specific Pages

By | September 1, 2016
Show/Hide Page Index

 

We can notice on default blogger templates, all the widgets you add to your blogger blog will be displayed on all posts pages, static pages, homepage and archive pages by default.To hide or display of blogger widgets/gadgets in specific posts pages, static pages, homepage or archive pages of blogger blog, you can need to use the below mentioned conditional tags.

S.No
Conditional Tag
Result
1
<b:if cond='data:blog.pageType == "item"'>
Displays widget between the tags only on post pages
</b:if>
By using this conditional tag displays widget only on post pages
2
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Displays widget between tags only on homepage
</b:if>
By using this conditional tag displays widget only on homepage
3
<b:if cond='data:blog.pageType == "static_page"'>
Displays widget between tags only on static pages
</b:if>
By using this conditional tag displays widget only on static pages
4
<b:if cond='data:blog.url = "URL of the page"'>
Displays widget between the tags only on particular pages
</b:if>
By using this conditional tag displays widget only on URL of your blog page
5
<b:if cond='data:blog.pageType == "archive"'>
Displays widget between tags only on archive pages
</b:if>
By using this conditional tag displays widget only on archive pages

Instead of displaying the widget, If you want to hide the Widget on the above specific pages add

!

before

==

on the conditional tag on above table codes.

Now lets us see to step by step procedure for changing visibility options of blogger widget.

Step 1: Go to Template and click on Edit HTML.
Step 2: Go to “Jump to widgets”.
Step 3: Let’s say that the id for one of my widgets is “HTML1”. After finding the widget’s, I found a similar code on my blogger template:

 <b:widget id='HTML1' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

The above code represents the widget/gadget that I have added in the Layout section lab.
Step 4: After you’ve found your widget’s code, add the below conditional tags marked with color dark green to change visibility options of the widget from specific pages or posts in Blogger.

For instance, in case you want:

1. To Show Widgets/Gadgets

1.1 To Display widget only in Post pages

 <b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
    <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>

1.2 To Display widget only in Home page

 <b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
    <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>

1.3 To Display widget only in Static pages

 <b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
    <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>

1.4 To Display widget only in particular page

 <b:widget id='HTML1' locked='false' title='' type='HTML'>
    <b:includable id='main'>
   <b:if cond='data:blog.url = "URL of your blog page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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 your blog page” to the address of the page in which you want the change the visibility options.

1.5 To Display widget only in Archive pages

<b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
<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>

2. To Hide widgets/gadgets

2.1 To Hide widget in Post pages

 <b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
    <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>

2.2 To Hide widget only in Home page

 <b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
    <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>

2.3 To Hide widget in Static pages

 <b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
    <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>

2.4 To Hide widget only in particular URL page

 <b:widget id='HTML1' locked='false' title='' type='HTML'>
    <b:includable id='main'>
   <b:if cond='data:blog.url != "URL of your blog page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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 your blog page” to the address of the page in which you want the change the visibility options.

2.5 To Hide widget in Archive pages

<b:widget id='HTML1' locked='false' title='' 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 != &quot;&quot;'>
<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 5: After Adding the conditional tags, Save Template. That’s it your are done, view your blog.

3 thoughts on “How to Hide or Display Blogger Widgets in Specific Pages

Leave a Reply