Hello. ð
Blogger has a widget or gadget feature. Widget or gadget is a dynamic element of our blog which we can add, remove, and modify — through either of these:
-
Layout
-
Theme ➡️ Customize button ➡️ Open the drop down by clicking the down-pointing triangle button next to the word "Customize" ➡️ Pick Edit HTML
This post is specifically for modifying the appearance of an entire gadget through Edit HTML menu, after we create it from the Layout menu.
Blogger implements XHTML 1.0, which is an HTML based on XML. It has overall HTML flavour, but with certain XML strictness.
For example, we create a new HTML/JavaScript gadget from the Layout menu:
We can define the Title and Content afterwards.
The Title and Content can be empty, we may tinker it later in the XHTML text editor.
But to indicate which new gadget we've just added, we need to use either one (title or content) as a reference. For example, we define the Title as "Test Gadget".
Then to further modify that, we navigate to the XHTML text editor through Theme ➡️ Customize button (open the drop down) ➡️ Edit HTML. Search the newly added gadget by clicking the text editor ➡️ hit CTRL + F ➡️ type the title of the gadget ➡️ press Enter.
Make sure we're using the Blogger text editor search feature, and not the browser built-in search function.
Element Nesting
It looks like this:
Controlling Appearance
To put a conditional gate to control its apperance on our blog, we add a cond attribute in the b:widget tag, like so:
The expression pattern for the cond attribute in the b:widget element is the same as in the b:if tag.
These are posts about the conditions — possible values for cond attribute — and the logical operators:
-
Blogger Conditional Tag — b:if and b:else
— possible values for
condattribute. - Blogger: How to Implement OR Operation Within b:if Block — logical operator.
- Blogger AND Operator — logical operator.
Example No. 1
Let's take an example, we want to show the gadget only on post URLs or static page URLs.
Taking this apart:
-
Matches all post URLs:
data:blog.pageType == "item" -
Or:
or -
Matches all static page URLs:
data:blog.pageType == "static_page"
The double quotation mark (") needs to be encoded as ".
Combined:
Place it in the b:widget tag as the cond attribute value:
Make sure to Save ðū to apply the change.
Example No. 2
Let's say, we want to make the HTML1 gadget appear only on the homepage URL. For that, we use:
data:blog.url == data:blog.homepageUrl
This comparison evaluates two Blogger data tags rather than literal strings.
Once more, hit Save ðū to apply the change.
Applicable to All Gadgets
This method is applicable to all gadgets on our blog.
To jump to a specific gadget instead of searching manually, use the button in the top-right corner of the XHTML editor — as shown below.
A Tool
This is a tool on Port Raptor to encode or decode the entities — like we're dealing with spiritus — HTML Character Endecoder.
All the best. ð