How To Display/Hide Blogger Widgets On Specific Pages?

Once you activate any widget in your blog, it will be displayed in all the pages by default including your homepage,static,index and archives pages.But what if you want any widget to appear only on a certain page or pages? Here I have a solution of that.By using blogger conditional tags we cab do this very easily.The negative part of this trick is it doesn't work with Labels, Archive and Followers gadgets.I will publish a tutorial later on applying different styling/layout to static pages.

How To Display/Hide Blogger Widget On Specific Pages?

Step 1 - Finding Widget ID

I have posted a detailed tutorial about finding widget ID and section ID.Click here to go that tutorial and find widget ID of your specific widget.

Step 2 - Finding Widget In Template

1. Now go to Blogger Dashboard > Design > Edit HTML. (In new User Interface - Dashboard > Template)


2. As always Download your template.


3. Tick Expand Widget Templates Check box.


4. Find your widget in the template by using Ctrl+F function and entering the widget Id in the search box.

Applying Conditional Tags

After finding Widget ID in your template you will find this code like this.

<b:widget id='HTML13' 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>

Below are the some examples of conditional tags.Just pay your attention to the highlighted lines and apply the conditional tags as I have applied in below examples,but don't forgot to write </b:if> code just below/after <b:include name='quickedit'> line.

To Show Widget On Index (list) Pages

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

To Show The Widget Only In HomePage

<b:widget id='HTML13' 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 Widgets On Post Pages Only

<b:widget id='HTML13' 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 Widget On Any Particular Page

<b:widget id='HTML13' 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 Archive Pages

<b:widget id='HTML13' 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>

To Show Widgets On Static Pages Only

<b:widget id='HTML13' 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 Widget On Post And Static Pages Only

<b:widget id='HTML13' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:post.url'>
<!-- 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 Widget On Label-Search Pages Only

<b:widget id='HTML13' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- 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>

The code will check whether the condition is true or false:

• If the result is true, it executes (and display) the widget’s content.


• If the result is false, it skips the content and hide the widget.

Now click on the save template button and you are done.



For an example you can see the floating go to top and comment buttos at below left of this page,you will also notice that these buttons are appearing only on post pages not on any other pages,here I have applied conditional tags.