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 menus:
- Layout
- Theme ➡️ Customize (open drop down) ➡️ 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 Layout menu:
We can define the Title and Content after that.
The Title and Content both can be empty, we may tinker it later on the XHTML text editor.
But, to indicate which new gadget we just added, we might put either one 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 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.
Elements Nesting
The elements nesting on the XHTML of the gadget will look like this:
Controlling Appearance
To put a conditional gate to control its apperance on our blog, we add cond attribute on the b:widget, like so:
The value for cond attribute (on b:widget tag) has similar pattern to the cond on b:if tag.
These are posts about the list of the conditions (possible values for cond attribute) and the logical operators:
Example No. 1
Let's take an example, we want to show the gadget only on:
✅ Post URL ➡️ data:blog.pageType == "item"
OR
✅ Static page URL ➡️ data:blog.pageType == "static_page"
") needs to be encoded as an HTML entity➡️
".Combined, it will look like this:
Place it on the b:widget as cond attribute value:
In the example above, the entire gadget will be rendered only on post URLs or static page URLs.
Make sure to Save 💾 to apply the change.
Example No. 2
If we want to make the gadget appear only on homepage of our blog, we can use:
data:blog.url == data:blog.homepageUrl
The comparison uses Blogger data tags, not string. Therefore, we can directly use it.
In the example above, the entire gadget will be rendered only homepage URL.
Once more, make sure to Save 💾 to apply the change.
Applicable to All Gadgets
This method is applicable to any other type of gadget we create (or pre-existing gadget) from Layout menu. Instead of search, we can also jump to a specific gadget using the button on top-right of the XHTML text editor.
Once we get to the gadget, we can then apply our customisation for it.
This is a tool on Port Raptor to encode or decode the entities — like we're dealing with spiritus — HTML Character Endecoder.
Thank you for visiting 🙂
Comments
Post a Comment