April 19, 2011

How to Display a Widget Only on Certain Pages In Blogger

Sometimes, you may or may not want to display a widget on a certain page. For instance, I don't like display the adsense widget on a main page and archive page.

By using conditional statement in HTML template, you can get it. You should add widgets which you want to display so that Blogger detect the widget. You can add, modify, and remove widgets in Dashboard >> Design >> Page Elements page.

When you are ready, just follow simple steps.

1. Sign-in your blogger account.

2. Go to Dashboard >> Design >> Edit HTML

3. Backup / Restore current template (use button in top of the showing page). Whenever you changes the HTML template, DO Backup before begin.

4. Check the 'Expand Widget Templates' box (in top-right of the template script box)

5. Find you widget section code. If your widget has a title, then find the title using the find function of your browser(in most case, ctrl+F). If your widget has no title, then think about proper term. For example your adsense widget can be found by your ad-name or 'google_ad'. Of couse, you can just look up the codes to find it.

For example, following widget code is used for display gap between widgets. The red-colored lines make the widget to display only on main (home) page. All you have to do is just insert two lines after making conditional sentence.

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

If you want to display the widget everywhere, but not homepage, then use next code instead
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Only display on archive page, use next code instead
<b:if cond='data:blog.pageType == "archive"'>

Only display on specified page on you blog, use next code instead
<b:if cond='data:blog.url == "http://[your-page-url]"'>