Understanding Blogger Conditional tags and How to use them

Share the love!
Understanding Blogger Conditional tags and How to use them

Hello Freinds as you know that lastly i posted about Move your Page title with a little Javascript And now i am going to explain Blogger Conditional tags, So lets start, Blogger Conditional tags allows you to specify elements of your template to appear on which page or pages. With the help of these tags we can do many amazing things for different pages like you can Remove Sidebar from Your homepage, Display your widgets on particular page or hide them from particular pages. But how they work ? Lets see,

Here is a look how they appear-

<b:if cond='Your-condition'>
<!-- Your elements here! -->
</b:if>

So it is a Paired tag starting with <b:if> and closing with </b:if>, like when you open a <div> tag you need to close it with </div> similarly we have to do with it.

So here is a list of Blogger Conditional tags -

Our first tag is for index pages which includes -
  • Home Page
  • Label Pages
  • Yearly archive Pages
<b:if cond='data:blog.pageType == "index"'>
</b:if>
Next tag is for Post pages -
<b:if cond='data:blog.pageType == "item"'>
</b:if>
Another tag is for our First post well this is not a proper page but we can put a condition for the first post
<b:if cond='data:post.isFirstPost'>
</b:if>
For blogger Homepage-
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
For blogger Static Pages-
<b:if cond='data:blog.pageType == "static_page"'>
</b:if>
For blogger Post and static pages
<b:if cond='data:blog.url == data:post.url'>
</b:if>
For blogger Archive pages-
<b:if cond='data:blog.pageType == "archive"'>
</b:if>
For blogger Specific page/URL
<b:if cond='data:blog.url == "your-url-here"'>
</b:if>
For blogger Label-search pages
<b:if cond='data:blog.searchLabel'>
</b:if>

But How you will use it?

See its pretty simple for example you have a paragraph you want to show it only on home page, Then our code will look something like the below-

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 
 Add your paragraph here which will 
 appear if the above condition is true
 -->
</b:if>

In the above tag we added a condition that if our blog url is equal to our homepage url then show our element which we have added between that tags.

Now what if we only want to hide it from the homepage i mean reverse of it? Well its very easy we have two ways first is using != (not equal to) like we use in javascript and second is using a <b:else/> tag. Both ways are correct but the first way using != (not equal to) doesn't work with some tags like for first post and label pages.

Lets have a look -

Using a != (not equal to) insted of == (equal to)
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- 
 Add your paragraph here which will 
 appear if the above condition is not true
 -->
</b:if>
Using <b:else> tag
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 
 Add your paragraph here which will 
 appear if the above condition is true
 -->
<b:else/>
<!-- 
 Add your paragraph here which will 
 appear if the above condition is not true
 -->
</b:if>

But what you can insert in these tags?

Well you can insert any section, div, widget, style or script its upto you how you are going to use this.

So this was how we can use Blogger Conditional tags. Hope all is clear to you and if not feel free to make a comment with your problem!

Comment with-

Disqus Blogger Google Facebook

0 comments:

Post a Comment

Comments :