Blogger b:widget Tag

The tags <b:widget> known as Gadget is a small application contain lots of code that interact with the user interface. In Blogger, Gadget can only be installed inside a tag <b:section>.

<b:widget> Syntax and Attribute

Blogger XML Language

<b:widget id='STRING'
          cond='EXPRESSION'
          locked='BOOLEAN'
          version='NUMBER'
          title='STRING'
          type='WIDGET_TYPE'
          mobile='BOOLEAN'
          visible='BOOLEAN'>
 
</b:widget>

A tag <b:widget> must have one tags <b:includable> with id 'main'. which is the part that will be displayed as a Gadget.
Tags <b:widget> can not be nested.
The BOOLEAN value is between 'true' or 'false'.
The version is related to layout version of the template.
WIDGET_TYPE is the specipic type of widget. If we want to make own widget, the type must be HTML.
mobile is only work with layout version 1, default value is 'no' even we not declare it. This is the statement wether or not to display its widget in mobile view
visible is statement attribute in newer layout version to tell may or not to display its widget.

In the HTML rendering of the blog, the tags <b:widget>are replaced by tags <div>. The tag <div> will contain the attribute id. The attribute class also added, it contains the value widget and the type of the widget. The attribute data-version is also added replacing the version of widget.

<b:widget> Example

The Basic

<b:widget id='HTML101' locked='false' title='Foo' type='HTML' version='2' visible='true'>
    <b:includable id='main'>
        <h1>
            <data:title/>
        </h1>
        <div>
            Hello Word
        </div>
    </b:includable>
</b:widget>

Result in HTML rendered Page Source

<div class="widget HTML" data-version="2" id="HTML101">
    <h1>
        Foo
    </h1>
    <div>
        Hello Word
    </div>
</div>

Hide Widget in Mobile View

In layout version 1, if we activated mobile view in Theme option, the widget will not be displayed by default. Because statement mobile="no" is hidden in there by default. To make widget appear on mobile view, we must declare mobile="yes" in the widget.
On newer Layout Version, since is not supporting attribute mobile, we must give an expression condition to the widget. The expression is data:blog.isMobileRequest with the operator ! (not)

Example Code

<b:widget cond='!data:blog.isMobileRequest' id='HTML101' locked='false' title='Foo' type='HTML' version='2' visible='true'>