Displaying a gadget only on static pages - or on everything except static pages

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the "static" pages in your blog.

In Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing - basically a bit of code that can be put into your blog without looking like code, and which does a specific thing.

I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.

Making a gadget that only shows on static pages:

1   Make the gadget

Do this in the usual way.

2   Drag-and-drop the gadget to the place where you want it

A popular place for a gadget that is going to look like a "home page" is in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:

3   Find the Gadget-ID in the usual way.

4    Find the code for your gadget and edit the template:

Edit your template  in the usual way.

Look for the widget name that you noted in step 3.  Notice what comes after it.   In this example, it's the line for Blog1:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Use the arrow at the left-hand-side of that line to expand the code for that gadget.    Now it looks a bit longer (the exact details depend on what type of widget/gadget it is.), like this:

  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- 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:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

5   Add conditional formatting:

You need to put conditional formatting code around the code for the gadget - making sure that it doesn't go around the code for anything else.

The code to use to put a gadget only on a static page is:

<b:if cond='data:blog.pageType == "static_page"'>

THE CODE FOR YOUR GADGET GOES IN HERE

</b:if>

The example above looks like this, when the code has been added:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<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 != &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>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

ALTERNATIVES:

To stop a space being left for the gadget on other pages, change the 2nd code-block you add to:

<b:else/><style type='text/css'>#XXXX {display:none;}/*remove blank space that the gadget leaves*/</style></b:if>

instead of just    </b:if>

To make the gadget appear on every page except static pages, use

<b:if cond='data:blog.pageType != "static_page"'>

THE CODE FOR YOUR GADGET GOES IN HERE

</b:if>

Notice the slight difference:    !=     instead of   ==

And of course there are various other conditions that you can use to control whether gadgets appear on certain pages, too.     For example, the home page.

NOTE:  
Copy and paste is the best way to transfer the code.  If you must type it in yourself, be very careful about what's a single quote mark and what's a double quote mark.

6    Check that it's worked

Preview your blog before you save the changes:  check that the the widget is visible.

Save the template changes, and look at your blog.  Check that

• The widget is, or is not, on static pages (depending on what option you chose)
• The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

---

Related Articles

Static Pages in Blogger

Controlling what goes on the homepage

Showing a gadget only on the home-page.

How to add a gadget using Blogger

How to edit your blog's layout template