old blog,

Hacking Blogger's widgets engine #2

Izhar Firdaus Izhar Firdaus Follow Support Jan 04, 2007 · 2 mins read
Hacking Blogger's widgets engine #2
Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.
This is my second post about what I've learned from the new Blogger engine. This time, I'll explain the about the widgets, its tags, and how to create your first widget.

Widgets
To those who didnt know it, Blogger widgets are those drag-and-drop able page elements in the new Blogger. By default, you can only choose to use the widgets provided by Google for your page. However, that is not the limit. The widget engine in the new Blogger offers good customization and allows developers to develop their own widgets to share with others!. Its uses HTML for layout and XML for content, therefore, its not hard to create your own widget if you know the basics.

Widget Tags
Widgets are defined using <b:widget> tags. You can read Blogger's documentation about the tag here. The basic is, when you define a widget, you just need to give it an id and a type. For a list of available widget types and it data variables, visit here. Below is an example of a simple widget using the HTML type.

<b:widget id="myWidget" type="blog">

<b:includable id='main'>
<div style="align:center">
<h><data:title/></h>
<data:content/>
</div>
</b:includable>


<b:widget/>


Writing Your First Widget
Writing a widget is very easy if you have basics in HTML, XML and a little bit of programming. Blogger's widget is a combination of those 3 elements. A program have a main() function, user defined functions and variables. Blogger's widget similar to that. The <b:includable> tags are the functions, and <data:/> tags are the variables. It also support loops and conditional operations. Read here for more information about includes, loops and conditional operations.

A very basic skeleton of a widget contains a widget declaration and main includable.
<b:widget id="myWidget" type="html">

<b:includable id='main'>

<-- main HTML layout -->

</b:includable>


<b:widget/>


From the skeleton, we can expand it more by adding includes and conditions.


<b:widget id="myWidget" type="html">

<b:includable id='main' var='post'>
Title : <data:title>
<b:if cond='data:content == ""'>
Content : Empty
<:b:else/>
<b:include id='printContent'/>
</b:if>
</b:includable>

<b:includable id='printContent'>
Content : <data:content/>
<b:includable/>

<b:widget/>




With this, I beleive its already enough for y'all to start writing your own widgets. And if you do, don't forget to share it with the rest of the world.
Sadly though, I couldn't find how to define our own variables. Without user defined variables, it reduces your flexibility when writing the widgets because you'll be depending a lot on built-in variables and widget types. Anyway, good luck :D
Written by Izhar Firdaus Follow Support
I'm a system architect, data engineer and developer advocate with passion in Free / Open Source software, entrepreneurship, community building, education and martial art. I take enjoyment in bridging and bringing together different FOSS technologies to help businesses and organizations utilize IT infrastructure to aid and optimize their business and organizational process.

LinkedIn : A friend network for professionals

I stumbled upon a url to this site from an email in a mailing list. Being curious, I opened the site. At first glance, I thought it...

In old blog, Jan 03, 2007

« Previous Post

Superhero? I'm Batman~!! Lolz

From Aizatto's blog, then I saw Surface doing it, Kaeru's not far behind, and followed by Me~!!Your results:Batman (90%)Hulk (75%) ...

In old blog, Jan 05, 2007

Next Post »