Targeting specific pages/URLs with conditional tags

Conditional tags are Blogger template tags that allow you to specify parts of your template to appear only under certain conditions. One particularly useful application of conditional tags is in specifying on which page or pages a HTML element should appear.

Ever wish you could display only relevant widgets onto a page, hide sidebars on certain pages, display different buttons on different pages, or apply a meta tag only to selected pages? Well, if applied properly, conditional tags can make all that happen.

 

I. Conditional tag syntax

The syntax is like this:

<b:if cond='PUT_CONDITION_HERE'>
</b:if>

It is made up of a <b:if> tag, with a  cond attribute added. Condition is entered as the value of the cond attribute. Each (opening) <b:if> tag need to be closed with a closing </b:if> tag.

 

II. List of conditional tags

Below is a list of conditional tags that target specific pages. I only list the opening tags here. Just make sure you include the closing </b:if> tag when applying a conditional in your template.

1. Index (list) pages
   Index pages include homepage, labels page and yearly archive page.
   

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

2. Post (item) pages
   

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

3. Static pages
   

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

4. Archive pages
   

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

5. Homepage
   

   <b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Specific page/URL
   

   <b:if cond='data:blog.url == "PUT_URL_HERE"'>

7. Post and static pages
   

   <b:if cond='data:blog.url == data:post.url'>

8. Label-search pages
   

   <b:if cond='data:blog.searchLabel'>

9. First post
   This is not a page, but a conditional for the first post. Used for targeting the first post on multi-post pages.
   

   <b:if cond='data:post.isFirstPost'>

III. Applying conditional tags

• To apply a conditional tag to a content, simply put the content between the opening <b:if cond…> and the closing </b:if>, like so:
  

  <b:if cond='data:blog.pageType == "item"'> 
  CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
  </b:if> 

  In the example above, the content will only appear on post pages.

• If you want to specify a alternate content (when the condition is false), you need to insert a <b:else/> tag followed by the content, like this:
  

  <b:if cond='data:blog.pageType == "item"'> 
  CONTENT 1 (TO BE EXECUTED IF CONDITION IS TRUE)
  <b:else/>
  CONTENT 2 (TO BE EXECUTED IF CONDITION IS FALSE)
  </b:if> 

  You can place the conditional anywhere in your template HTML, except inside a section or inside a widget content box. The content can be a div, a section, a style tag, another conditional tag etc.

• Reversing a condition
  

  A condition can be reversed simply by replacing the comparison operator from == (is equal to) to != (is not equal to), like so:

  <b:if cond='data:blog.pageType != "item"'> 
  CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
  </b:if> 

  In the example above, the content will only appear on pages other than post pages (i.e. removed/hidden from post pages). This method is not applicable to Label-search and First Post conditionals.

IV. Application examples

Below are some examples of what you can do with conditional tags:

• Display widgets on specific pages
• Applying different styling to static pages
• Adding description and keyword meta tags

 

Enjoy!