Display/hide widget on specific pages in Blogger

When you add a widget (or a gadget as Blogger would call it) to your blog, by default the widget would appear on all pages –homepage, index, archive, post and static pages. But what if you want a certain widget to appear only on a certain page or pages, can it be done? In other words can you select on which page/pages the widget would or would not appear?  The answer is yes you can -by using Blogger conditional tags.

Note: This trick doesn't work with Labels, Archive and Followers gadgets. For these gadgets you want to use the CSS's display none method.

Let us proceed,

 

1. Find your widget or section Id

To address a widget or a section in HTML, you need to know its Id. Here’s how to find a widget or section Id.

 

2. Locate the widget code in HTML

1. Go to Dashboard > Design > Edit HTML.
2. Check the  Expand Widget Templates check box on top right of the HTML window.

3. Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box.

Your widget code might look like this. It may be a little different, but it’s okay. Just pay attention to the highlighted lines. Widget content is contained in between those two lines -in "includable" section.

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>  
    <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>

 

3. Choose the appropriate conditional tag

I listed some conditional tags in another post -Targeting specific pages with conditional tag. Copy your desired tag from there and apply it here.

 

4. Apply the tag

Paste the tag (from step 3) immediately after <b:includable id='main'> and the code line 11 to 15 immediately before </b:includable>, as shown below.

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'> 
PUT CONDITIONAL TAG HERE  
  <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:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if> 
</b:includable> 
</b:widget>

Replace WidgetID in line 13 with the widget ID from code line 1.

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.
  You need to hide the widget because in most templates the content-less widget will still appear -as an empty box.

 

5. Save and view

Click Save Template button and view your blog.

 

That’s all to it. Enjoy!

 

Update Nov 2010
Revised code to prevent empty widget box from appearing on other pages.

 

Technorati Tags: widget,blogger