Simple Blogger Tutorials

Using Conditional Tags in Blogger

Conditional tags in Blogger are used to tell browsers what to do in certain conditions. It is a great way to do certain things like hiding widgets or gadgets or your share buttons in Blogger.

For example, when we want to show “Hello world” on post pages and “Goodbye Cruel World” on every other page then we can use it as:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Hello world
<b:else/>
Goodbye Cruel World
</b:if>

A conditional tag comes handy when you are designing your Blogger blogs and customizing and editing it from the scratch. But first you need to know how many type of pages are there in Blogger and then how to use these conditional tags respective to that type of page. In this tutorial I will try to cover most of it, so let’s start.

Type of Pages in Blogger and Conditional Tags to Use

Item Page

Item page refers to the individual post pages.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
{...}
</b:if>

Index Page

It refers to every other page except post pages.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
{...}
</b:if>

Archive Page

It’s for your archive pages in Blogger. The tag will be:

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
{...}
</b:if>

Static Page

For static pages in Blogger.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
{...}
</b:if>

For a Particular Page

If you want to do something on a particular page then the conditional tag for it will be:

<b:if cond='data:blog.url == &quot;URL of the page&quot;'>
{...}
</b:if>

The only thing that you have to do is replace “URL of the page” with your page’s URL.

Homepage only

It's for the homepage only.

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

Label page

Conditional tag for label page.

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

404 Pages

Here is a new addition. This conditional tag is for Blogger 404 or “Page not found”.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
{...}
</b:if>

Alternative Condition

Now suppose you want a conditional tag that alternates every rule. Say, in first example, I showed how to display something only in post pages but just an ! (exclamation mark) can alternate that condition. For example, when we apply:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
Hello World
</b:if>

It will set the condition that it should be shown on every page other than post page.

Conclusion

“Hello world” is just an example, but if it’s implemented correctly, you can use conditions to do many things.

However, you can find in most of my tutorials that I have used conditional tags. Have a look at my getting social tutorials.

6 comments :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. It's a off-topic discussion but your answer is "simply CSS".

    ReplyDelete
  3. Hey man, thanks.
    That's an amazing post.

    ReplyDelete
  4. Hey can you please let me know how to use conditional tags for a condition like this- i want to show my adsense unit only under my first post title of my blogger blog.
    I have been searching for the answer from the last month but not getting.
    Here is my query at Google help forum
    http://www.google.es/support/forum/p/blogger/thread?tid=1a675a97a13d2e03&fid=1a675a97a13d2e030004acf832e3e461&hl=en

    ReplyDelete
  5. If I'm correct then it seems that you have added the ad scripts from Adsense site above <data:post.body/> putting it into divs as:

    <div style='float:left; padding:5px;'>
    ...
    Adsense goes here
    ...
    </div>

    This will lead you to show blank spaces as Adsense allows maximum 3 ads to be shown on each page.

    As your title mentioned in the forum, you can put the full div section including the ad script as:

    <b:if cond='data:post.isFirstPost'>
    <div...
    Adsense script
    .../div>
    </b:if>

    This specific condition for Blogger will make your Adsense appear only under first post title on homepage and will also will be visible on post pages.

    ReplyDelete
  6. Hi buddy,

    Good share..
    What about this?

    ReplyDelete

Don't SPAM! Read comment policy.

Like