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 –
- In the tutorial Show post summary on search + label pages only, we use Conditional Tags to show excerpts on search pages only while keeping full posts on the homepage.
- In the tutorial Add related posts to single post only on Blogger, we use Conditional Tags to display related posts on the single post page only to stop them appearing on the homepage.
- In the tutorial adding a signature to blogger posts, we use Conditional Tags to display the signature image on the single post page only and hide it from appearing on the homepage.
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.