Conditional Tag for Show and Hide widget in different Blog pages

A Blog is combination of different type of pages. The commonly we know about the Post Page, Home page, Archive, contact page, error 404 page and Static page which is used to show blogger different widgets.  But if we display all widget in all page then our template will be slower and it won’t be professional.

Conditional tag help to speed up the blogger template. Also it helps the template designer to insert some variation in blog design. So this is very import part that should learn by every blogger.

For example almost all Blog template integrate Related Post widget. But majority designer show related post widget in post page only. And it remains hidden on Home page. For hiding this widget from Home page we have to use a conditional tag. So it is clear to use why we will use conditional tag.

I will discuss in details that how easily we can use conditional tags in various part of our blogger template. Remember that the conditional tag generally used for selective display. And it is always start with <b:if cond=’……’> tag and end with </b:if> tag. For better understanding an example has given below with Conditional tag syntax.

<b:if cond='conditional attribute here'>
Widget Code should be inside of Conditional tag
</b:if>

Proper Implementation of Conditional tag in blogger template

Now we will learn about different conditional tag which will help us to Show and Hide widgets on different blog pages.

1. Condition for Welcome Message Home Page

If you want to display a welcome message in blog homepage only then the conditional tag will be like below.

<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'>
Show Me in Home Page Only
</b:if>

But you can hide the widget from Home page and display in all pages by adding below conditional tag.

<b:if cond='data:blog.canonicalUrl != data:blog.canonicalHomepageUrl'>
Hide Me from Home Page Only
</b:if>

2. Displaying Widgets on Home Page Only

This conditional tag will display widgets only on home page. When you enter into the post, archive or any other page then the widget will automatically hide.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Show the widget on Homepage Only
</b:if>
 

3. Post and Static Pages Conditional tags

If you want to display the widget or Advertisement both on Post and Static Pages then this is suitable for you. For targeting both post and static pages in blog.

<b:if cond='data:blog.url == data:post.url'>
widget or Advertisement code Here
</b:if>

4. Static Page Conditional Tags

For displaying Widget or Advertisement on Static page only use this conditional tag.

<b:if cond='data:blog.pageType == "static_page"'>
Widget or Advertisement code Here
</b:if>

5. Blog Post Page Conditional tag

This tag used for Blog posts pages. Generally for social sharing widget, related posts widget, author bio widget etc. So for those type of widget use this conditional tag.

<b:if cond='data:blog.pageType == "item"'>
social sharing widget, related posts widget, author bio widget
</b:if>

6. Conditional Tag for Index pages

Newbies are confused about Index pages. Actually Index pages are Homepage, labels page, search query and yearly archive page. We can also load elements by applying below conditional tag.

<b:if cond='data:blog.pageType == "index"'>
Widget will execute in Index page only.
</b:if>

7. Label or Search page

We can enter into a post by using Blog Label or from search page. So for showing the elements on Label or Search page only use the below code.

<b:if cond='data:blog.searchLabel'>
Load elements in Label or Search Pages
</b:if>

8. Conditional Tag for Pages with Search Query

In search query we can also use conditional tag. This tag will show the elements with search query only.

<b:if cond='data:blog.searchQuery'>
Load elements Search Query
</b:if>

9. Conditional Tag for Archive page

Generally archive page use for surfing the older posts. And use can enter into archive by Week, Month or year. So for loading the widget on archive page only we can use this tag.

<b:if cond='data:blog.pageType == "archive"'>
Show elements on archive page
</b:if>

10.First post Conditional tag

This conditional tag use for first post only. This can be first post of index page, archive page or label. Actually some blogger wants to display AdSense ads below the first post only. In this case we can use the below conditional tag.

<b:if cond='data:post.isFirstPost'>
Execute elements along with First post
</b:if>

11. Conditional Tag for Error page

In Blogger if user can’t find any desired link but not available then it shows error page. Or for visitors into removed link redirected to Error page which is also known as “404” errors.

<b:if cond='data:blog.pageType == "error_page" '>
Load elements on Error 404 Page
</b:if>

12. Conditional Tag for a Specific page/URL

Some blogger use redirect option. This means you are trying to entering in an specific link but after landing it is redirecting on different pages of Blog.  So for specific redirected page we can use this conditional tag.

<b:if cond='data:blog.url == "Write Redirected URL" '>
Put the code for Redirected page
</b:if>

Conditional Tag for Content

In Blog content we can use conditional tag. And content is available only on post page. We can apply conditional tag into a content

<b:if cond='data:blog.pageType == "item"'>
Your Content (It will execute if condition is true)
</b:if>

And for specifying the alternative content when the condition is false then we have to insert <b:else/> tag.

<b:if cond='data:blog.pageType == "item"'>
1st Content Here (It will execute if condition is true)
<b:else/>
2nd Content Here (It will execute if condition is false)
</b:if>

 Reversing a Condition in Blogger

This is rarely used but pretty interesting. The main trick of this condition is for opposite result. Suppose we will display a widget on home page only. To do this we have to use an ! (exclamation mark).

Suppose a conditional tag containing == (2 equal) in this case you have to omit 1st equal mark and add (exclamation mark) != . Simply your code will give you opposite result. Example below-

<b:if cond='data:blog.pageType != &quot;item&quot;'>
It will execute if condition is true
</b:if>

or

<b:if cond='data:blog.url != data:post.url'>
It will execute if condition is true
</b:if>

Conclusion

This is possible to add multiple conditional tag. But don’t you straight and reverse conditional tag at a time, because it will give an error. And remember that to add a conditional tag you must find out the widget id (Example: HTML2, HTML6 etc). Generally you can find the widget id by edit any widget from Blogger Layout. And after getting widget id search the id by edit template.

Step 1 From blogger dashboard Template -> Edit Html

Step 2 Now find widget id by pressing  Ctrl+F  

Step 3 Now simple wrap the widget inside the conditional tag. And see the output.

That’s it you have successfully added the conditional tag. If you have anything to share then leave a comment below for enriching our knowledge. Thank you.