Notification texts go here English Typing-Tutor Buy Now!

b:widget

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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'>

Other Tag

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.