Apply CSS to specific pages on Blogger using conditional tags

Ever wanted to apply code to specific areas of your Blogger template but not to other sections? This is something I’ve included in certain tutorials / comments before but without fully explaining it. As more and more people are now asking about how to apply HTML / CSS to certain areas of their blog and not to others I thought it was time to dedicate a post to it. This is slightly more advanced than other tutorials so may take some practise but hopefully through the examples and explanations you’ll be able to figure it out. I’ll start by showing you the conditions, and then showing you the different ways to apply those conditions and finally show you an example of applying CSS to a specific page.

What are Blogger Conditional Tags

Conditional Tags on Blogger is a way of applying something to a specific part of your template under certain conditions. There are hundreds of ways you can use these, one of the main ways they are used is to display / hide CSS, widgets, sidebars and other content on selected pages only. We’ve also used them in previous tutorials –

Blogger Conditional Tags

Here are a list on the Conditional Tags that are available to target specific pages on Blogger, with the opening <b:if cond... and closing </b:if> tags. It’s important that these are correct!

Index Pages
Homepage, Labels Page and Archive Page

<b:if cond='data:blog.pageType == "index"'>  YOUR CODE HERE   </b:if> 

Single Post Page
Those created Page > Add New Post e.g. year/month/post-title.html

<b:if cond='data:blog.pageType == "item"'>  YOUR CODE HERE   </b:if> 

Static Pages
Those created Page > Add New Page e.g. /p/about.html

<b:if cond='data:blog.pageType == "static_page"'>  YOUR CODE HERE   </b:if> 

Single Posts and Static Pages

<b:if cond='data:blog.url == data:post.url'>  YOUR CODE HERE   </b:if> 

Archive Pages

<b:if cond='data:blog.pageType == "archive"'>  YOUR CODE HERE   </b:if> 

Blog Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>  YOUR CODE HERE   </b:if> 

Specific URL
Replace URL with the full URL e.g. http://www.yourblogname.blogspot.com/rest-of-url.html

<b:if cond='data:blog.url == " URL "'>  YOUR CODE HERE   </b:if> 

Label Pages

<b:if cond='data:blog.searchLabel'>  YOUR CODE HERE   </b:if> 

Search Pages

<b:if cond='data:blog.searchQuery'>  YOUR CODE HERE   </b:if> 

404 Error Pages

<b:if cond='data:blog.pageType == "error_page"'>  YOUR CODE HERE   </b:if> 

First / Most Recent Post

<b:if cond='data:post.isFirstPost'>  YOUR CODE HERE   </b:if> 

Now that you know the Conditional Tags, here is how to use them.

Applying Blogger Conditional Tags

There are three ways to apply Conditional Tags on Blogger. This will explain the different ways you can use Conditional Tags.

Apply Condition
Meaning: If this condition is true, then apply the HTML / CSS. If it is false, do nothing.

<b:if cond='CONDITION HERE'>
YOUR CODE HERE
</b:if>

Apply Condition + Alternative
Meaning: If the condition is true, apply the HTML / CSS in the first section. If the condition is false, then apply the HTML / CSS in the second section instead.

<b:if cond='CONDITION HERE'>
YOUR CODE HERE
<b:else/>
YOUR CODE HERE
</b:if>

Reversing Condition
Replace the comparison operator in the Conditional Tag from == to != if you DONT want to apply something to one page.

Meaning: If the condition is false, then apply the HTML / CSS. If it is true, do nothing.

<b:if cond='data:blog.pageType != "item"'>
YOUR CODE HERE
</b:if>

Applying CSS to a Conditional Tag (with example)

Here is how to apply CSS to a specific condition shown above. Go to Template > Edit HTML and find </head>, above it add the following

<b:if cond='CONDITION HERE'>
<style type='text/css'>

CSS HERE

</style>
</b:if>

Add the CONDITION and the CSS you want applied. The easiest way to understand them is to think about Conditional Statements in PHP, keeping the “if this then this” thought in mind while writing it out will keep you on track. So taking the above code to mean if this condition is happening / active, then apply this CSS to that only.

If we wanted to hide the post footer on Static Pages (like our about and contact page) then we would use the following

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
.post-footer {display:none;} 
</style>
</b:if> 

I hope that all made sense, it can be a bit confusing at first but once you get used to applying it I promise it becomes easier.

Comments are now closed on this post.

Still need help? Check out our Coding + Consultation service for one-on-one assistance.