Conditional display of Blogger widgets without the use of any CSS.

One can also display Blogger widgets conditionally without using any CSS. By adding the conditional statement to a widget block in Blogger, you could decide whether it loads on the homepage, archive pages and much more.

If you do not want to add any extra CSS codes to your theme which might even contribute to the page bulk size and reduce the load time, then this method is best for you.

We have below some examples and cases where you could use the conditional statement to load a widget only on specific pages and even on mobile or desktop view.

Applying the conditional statement to a Blogger widget tag

Blogger templates are in HTML, CSS and Javascript. But we also have some Blogger-specific tags which arent core HTML tags. The Widget tag is one of these Blogger Specific tags.

We shared an article on the Blogger conditional tags here. But note that the tags you will find on the later are just a hand pick.

And as you will see on that article on Blogger conditional tags, they can be used to target specific pages, post and more.

By adding the conditional statement to a Blogger gadget, one can as well display them only under certain condition. For example, we are using this method to add "Label page/ archive page description" here on Blogger Customiz.

The Blogger conditional tag

The conditional tag used in coding Blogger templates has the following format:

  <b:if cond='condition_expression'>
    <!-- content when condition is satisfied or not-->
  </b:if>

In the above conditional tag, the expression can be to show content or not under certain circumstances.

In the above tag, the "conditional syntax" is represented by:

  cond='condition_expression'

So, one can, therefore, use this conditional statement to target any Blogger widget as well.

Blogger widget tag (syntax and attributes)

A blogger widget tag has the following format:

  <b:widget>... </b:widget>

The above is just a basic structure. Every  <b:widget> must have an ID and a type. Below we have the full structure of the Blogger widget tag syntax and attributes.

  <b:widget id='HTML15' locked='true' title='' type='HTML' visible='true' mobile='' version=''> ... </b:widget>

In the above tag, we have the following syntax and their attributes

•           id= 'STRING'
•           locked= 'BOOLEAN'
•           version = 'NUMBER'
•           title= 'STRING'
•           type= 'WIDGET_TYPE'
•           mobile = 'BOOLEAN'
•           visible = 'BOOLEAN'

What to note

1. All syntaxes with the boolean attribute can have as value true or false. 
2. As for the type, it can be HTML for and HTM/Javascript widget, FeaturedPost, etc.
3. The version is related to the layout version of the template.
4. Visible is statement attribute in newer layout version to tell may or not to display its widget.
5. All widget tags have a <b:widget settings> tag and must have a <b:includable> tag as well with id='main'.

Applying a condition to a Blogger widget tag

Some widget tags already come with the conditional syntax on them. A good example is a Widget that shows all recent posts on the homepage only.

We have an example of a blogger widget tad with conditional syntax and expression allowing it to load only on a specific label page below.

  <b:widget cond='data:blog.searchLabel == &quot;WordPress Plugins&quot;' id='HTML16' locked='true' title='' type='HTML' visible='true'>... </b:widget>

The above widget will only display if we open the 'WordPress Plugins' label page. Using the same way, you can display a widget on even items pages, static pages, homepage only or even on search pages.

You will find all the conditional expressions for the different page, post or items pages here.

If you want to show a widget only on desktop view and not mobile view, then add the conditional syntax below to the widget:

  <b:widget cond='data:blog.isMobileRequest == &quot;false&quot;' id='FeaturedPost1' title='' 
 type='FeaturedPost'>... </b:widget>

What if you have two different conditions on which you want to display the gadget or widget? You can use 'and' to link the two conditions as follows:

 <b:widget cond='data:blog.isMobileRequest == &quot;false&quot; and !data:view.isHomepage' id='FeaturedPost1' title='' 
 type='FeaturedPost'>... </b:widget>

The above widget won't show if the request made is from a mobile device and the user is on the homepage.

Conclusion

We have only given some insights and touched the basic ideas on how to apply the conditional syntax to a Blogger widget. There are may different conditional expressions one can use. 

If you have any questions related to this post, please leave a comment below and we will get back to you.