Display/Hide Widget On Specific Pages In Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

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.
Let us proceed,

• 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>

• 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.

• 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.

• Save And Done

Click Save Template button and view your blog.

That’s all to it. Enjoy!

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.