Often times in comments for my Blogger tutorials on this blog, I am asked “how do I make this work only on posts and not pages?” or similar questions relating to having widgets or scripts only appear on certain areas of the site.  As you probably know, adding a widget or HTML code to your Blogger template will usually apply that code to every page of your blog. A Linkwithin widget appears on the home page, on single posts, and on pages, for example.

There is a way to only make your content appear on certain selected sections of a Blogger template, but you need to use something called Conditional Tags.

Conditional tags allow you to specify which parts of your template will appear under certain conditions. If you only want to display that Linkwithin widget or a Facebook Share button on individual post pages and not on the home page, you can do that with conditional tags.  If you want to hide certain elements of your design on certain pages, you can do that as well.

Before jumping into this, note that this technique is a bit more advanced. If you have trouble understanding HTML you will want to be careful when editing your template with code. You can try playing around with these options on a test blog until you feel comfortable implementing them into your own.

Blogger has a bunch of conditional tags you can use to target specific pages. Here is a list of them below:

Blogger Conditional Tags

Index Pages
Includes: home page, label pages, and yearly archive pages

<b:if cond='data:blog.pageType == "index"'>
YOUR CODE HERE. IF THIS IS THE INDEX PAGE, DO THIS.
</b:if>

Home Page
Includes: the home page only

<b:if cond='data:blog.url == data:blog.homepageUrl'>
YOUR CODE HERE. IF THIS IS THE HOME PAGE, DO THIS.
</b:if>

Item Pages
Includes: single posts (i.e. when you open up a single post to read)

<b:if cond='data:blog.pageType == "item"'>
YOUR CODE HERE. IF THIS IS AN ITEM PAGE, DO THIS.
</b:if>

Static Pages
Includes: pages created in the Pages section of Blogger (not posts)

<b:if cond='data:blog.pageType == "static_page"'>
YOUR CODE HERE. IF THIS IS A STATIC PAGE, DO THIS.
</b:if>

Archive Pages
Includes: posts in your archive, older/newer posts pages

<b:if cond='data:blog.pageType == "archive"'>
YOUR CODE HERE. IF THIS IS AN ARCHIVE PAGE, DO THIS.
</b:if>

Search/Label Pages
Includes: pages that are accessed through the label cloud or list and in your post footer

<b:if cond='data:blog.searchLabel'>
YOUR CODE HERE. IF THIS IS A LABEL PAGE, DO THIS.
</b:if>

Search Query Pages
Includes: pages that are accessed using the Search widget function

<b:if cond='data:blog.searchQuery'>
YOUR CODE HERE. IF THIS IS A SEARCH RESULT PAGE, DO THIS.
</b:if>

Error Page
Includes: your error page when a post is not found or doesn’t exist

<b:if cond='data:blog.pageType == "error_page"'>
YOUR CODE HERE. IF THIS IS THE ERROR PAGE, DO THIS.
</b:if>

Specific Page/URL
Includes: a specific page that you supply. Enter your URL in the code below

<b:if cond='data:blog.url == "URL"'>
YOUR CODE HERE. IF THIS IS THE PAGE SPECIFIED, DO THIS.
</b:if>

First Post
Includes: only the first post shown on your blog. Does not include pages.

<b:if cond='data:post.isFirstPost'>
YOUR CODE HERE. IF THIS IS THE FIRST POST, DO THIS.
</b:if>

How to use these

These codes can be used anywhere inside of your template’s HTML page, excluding inside of a <b:section> or <b:widget> tag. If you only want a Linkwithin widget to appear on individual post pages, for example, you would use this code in the place you want your Linkwithin widget to appear in your template (usually in the post footer)

<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:blog.pageType == "item"'>
<div class="linkwithin_div"></div>
</b:if>
</div>

All you need to do is put the content between the conditional tags as shown above.

Reversing a Condition

If you want to exclude a page or post, you might want to reverse a condition. This means that the content you specify will only appear on pages other than the one you’ve included in the tag. You would simply implement a reverse condition like so:

<b:if cond='data:blog.pageType != "static_page"'>
YOUR CODE HERE. IF THIS IS NOT A STATIC PAGE, DO THIS.
</b:if>

All we did was change the == to != in the code above. Instead of saying “if this page is equal to the item” we have changed it to “if this page is not equal to the item”.

This may seem confusing at first, but once you get the hang of it, these conditional tags can be extremely useful!

Ready to become an online entrepreneur?

Start now and build the dream you’ve always wanted. The sky’s the limit!