Saturday, February 14, 2009

Selective display of widgets

Here is a small tutorial on how to display your blog's widgets selectively on your pages.

Let's suppose you only want to show your Profile Widget on your blog's Homepage, but not on the other pages. This is how it is done.

Step 1: Back up your template
Go to your blog's Layout Page, and enter HTML-edit mode. Download your template as an XML-file and store it in a safe place. In case template-hacking takes a wrong turn somewhere, you can upload your template-file again and you are back to normal.

Step 2: Find the Profile Widget
Expand the widget-code by checking the checkbox on the HTML-edit page. Now scroll down and look for the Profile Widget, that looks like this:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    ...
    ...
    </div>
  </b:includable>
</b:widget>

Step 3: Modify the widget code
Now we only want to display this widget if the page that we are looking at is our blog's Homepage. We will use a <b:if>-statement to check for this situation.
Insert the following (red) lines of code into the widget code:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
  <b:includable id='main'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    ...
    ...
    </div>
  </b:if>
  </b:includable>
</b:widget>

The datafield data:blog.homepageUrl contains the url of your blog's homepage. The datafield data:blog.url holds the url of the current page. If they are the same (==) we are on the homepage and the widget should be displayed. If they are not the same, the widgetcode is skipped.

Step 4: Save your template
Save your template and display your blog.