old blog,

Hacking Blogger's widgets engine #1

Izhar Firdaus Izhar Firdaus Follow Support Jan 02, 2007 · 2 mins read
Hacking Blogger's widgets engine #1
Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.
I just started playing around with the new Blogger's widget based template engine. At first it was confusing because its not normal HTML based template, but a strict XHTML 1.0 XML template. But after a playing around with it for a few hours, I started to understand the elements of the template and started to modify my template little by little (those who entered my blog a few times today might noticed that the template keep changing) and testing what element will affect what values. This is what I've learned so far.

The Template
The template generally consist of 2 significant parts, the layout and the widgets. The layout template is the one Blogger shows by default when you enter edit-html mode. The widgets are shown below the layout template after you check "Expand widget template" checkbox. You only need to change the layout part if you want to customize the base appearance of your blog. If you want more widget specific customization, edit the widget.


Theming
The theming system in the widgets engine depends heavily on CSS. If you scroll down the layout code of the default themes, you'll see that more than 80% of the layout is CSS. XHTML is only used to define how stuff will be arranged and CSS will define how stuff will look like.


Font and Colors
The new engine provide a nice UI interface for changing the color and font values in the CSS code. You just need to define the variables inside the CSS code using <variable> tags and it will appear at the "Font and Colors" setting in Blogger.



Example of a variable definition
<Variable name="bodyBgColor" description="Background Color" type="color" 
default="#cfcfcf" value="#C3D9FF">


Example of using the variable inside the CSS
body {
background-color: $bodyBgColor;
}


From what I found for now, the variable tag only support 2 types which are color and font. So, you can only use it for CSS font and color settings only.

Thats all I guess for now. I will be posting more of this in the future. So, stay tuned (^-^)
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.

GTalk Online Status Indicator

I beleive lots of us is familiar with Yahoo!'s I'm Online images on websites, blogs, myspace, friendster, etc. Some of us might not p...

In old blog, Jan 01, 2007

« Previous Post

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

Next Post »