Conditional tags are special tags used in blogger templates which target different HTML, CSS and Javascript elements to specific type of pages or URL. A blogger template contains variety of elements which are not necessary for each and every page type. Some elements should be used in post pages but their presence in home page will make template awkward. Similarly you are not supposed to show Adsense ads on static pages in your blog because they are not actual content pages so you could get penalty from Adsense for doing so. A conditional tag is a tool which helps you in adjusting target of a specific element.
If you have ever seen HelpITx's 404 page, you might have noted that some elements which are displayed in other pages do not appear in these pages for example Right Side bar, Mini Header, Comments, Header etc. These elements have been stopped to appear by using conditional tags. In English language, a conditional sentence is composed of two clauses, If clause and then clause where "if" shows the condition while "then" shows the consequence of the condition. Just like this, the conditional tags in blogger also consist of an If statement and instructions to be implemented for that condition.
How Conditional Tags Work In Blogger:
Below is a typical example of conditional tag syntax.<b:if cond='your condition'> CSS, HTML or Javascript Coding </b:if>If you have little knowledge of HTML, then you might have noted that it is basically a <b:if> tag which is extended by a "cond" attribute. It is conditional attribute where we enter our condition which is then followed by content and end with closing </b:if> tag. The HTML, CSS rules and Javascript which we enter in this cond attribute will be applied to our conditions.
Lets see an example of removing "Showing Posts With Label XYZ. Show All Posts" status message from our label search page. This message appears on the label page of blogger blogs. To remove this, we use following condition.
<b:if cond='data:blog.searchLabel'>
<style>
.status-msg-wrap {display: none;}
</style>
</b:if>
In this example, "cond" attribute shows that targeted page type is label page and the CSS rule has been used to hide Status message from appearing in this type of page thus it has removed the "Showing posts with label" message in label pages.List Of Blogger Conditional Tags:
The above example shows only a single conditional tag. The actual list is longer than one so I am going to explain most commonly used conditional tags which target and specify different types of pages which include static pages, posts pages, homepage, label pages etc.1. Conditional Tag For Homepage:
This tag is used to specify Home Page only. The "Home Page Coding" will load in home page of your blog.<b:if cond='data:blog.url == data:blog.homepageUrl'> Home Page Coding </b:if>
2. Conditional Tag For Post And Static Pages:
This tag is used when you want to execute elements in both post and static pages collectively.<b:if cond='data:blog.url == data:post.url'> Post And Static Page Coding </b:if>
3. Conditional Tag For Post Page Only:
Unlike the above tag, this tag targets blog page only. Not both post and static pages.<b:if cond='data:blog.pageType == "item"'> Blog Post Page Coding </b:if>
4. Conditional Tag For Static Page Only:
It targets only static pages of your blog. Static pages may include About, Privacy, Terms Of Service, Disclaimer or Contact pages.<b:if cond='data:blog.pageType == "static_page"'> Static Page Coding </b:if>
5. Conditional Tag For Label/Category Page:
It targets label pages only. Label pages are special pages of blog having a specific URL for collection of posts with same label/category.<b:if cond='data:blog.searchLabel'> Label Page Coding </b:if>
6. Conditional Tag For Index Pages:
The pages which display multiple blog posts as a summary are called index pages. They include Homepage, Label pages, search pages and archive pages. The following tag targets this type of pages.<b:if cond='data:blog.pageType == "index"'> Coding for index pages </b:if>
7. Conditional Tag For Archive Pages:
Blogger provides a default Archived posts widget which display posts in monthly or annual sequence. The pages which contain the archive posts in monthly or yearly sequence are archive pages. Tag below specifies those pages.<b:if cond='data:blog.pageType == "archive"'> Archive Page Coding </b:if>
8. Conditional Tag For Error Page:
An error page is that page which is not available on the blog. It results when someone click a broken link or link to a deleted page. Technically it is called 404 Error Page according to HTML error codes. Below tag specifies only 404 Error page of the blog.<b:if cond='data:blog.pageType == "error_page"'> 404 Error Page Coding </b:if>
9. Conditional Tag For Specific URL:
This tag is used when you want to specify a specif page or URL in your blog.<b:if cond='data:blog.url == "your_URL_here"'> Specific Page Coding </b:if>Replace "your_URL_here" with URL of the page you want to apply something.
10. Conditional Tag For Search Pages:
Search pages appear after submission of a search query in blog's search. It means that a search page is that which is executed when a user search something in a blog. Below tag specifies search query pages.<b:if cond='data:blog.searchQuery'> Search page Coding </b:if>
Reverse Condition In Conditional Tag:
Condition on a specific tag can be reversed by replacing "==" signs with "!=" sign. For example in conditional tag for post page, we can reverse the situation in following way.<b:if cond='data:blog.pageType != "item"'> Blog Post Page Reverse Coding </b:if>It means that the coding written inside this tag will applicable to all pages other than post pages.
Apply Multiple Conditions:
Multiple conditions can also be applied using an additional <b:else/> tag. It is applied in a way that when one condition is false, the other condition comes in work. Lets see an example.<b:if cond='data:blog.url == data:blog.homepageUrl'> If condition is true. <b:else/> If condition is false. </b:if>In the above statement, we have used <b:else/> tag which is differentiating between two different coding. One coding when the condition is true and other when it is false. The tag which we have used is for homepage only so condition true means when the page type is homepage, content for the true condition will load. Condition false means the page isn't homepage so the second coding written after <b:else/> will load.
Placement Of Conditional Tags:
Conditional tags can be placed everywhere in blogger template except for some exceptions that include inside widget or inside widget section. They cannot be placed inside it but can be used outside to display a specific widget on a specific page type.Hope it helps you to understand conditional tags completely. If still you are having any problem in using conditional tags, you can ask me.
Post A Comment:
0 comments: