Skip to main content

Hacking Blogger's widgets engine #2

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
3 comments

Popular posts from this blog

Consolidated community site infrastructure on Plone

In Inigo, we believe in helping out local FOSS communities and help them grow. We help out in community events where we can, present FOSS talks, and provide some platforms for local communities to grow. One of such platform is our consolidated community site infrastructure on Plone.

The system/infra and its components was originally developed for the Fedora Malaysia website, while keeping in mind to keep it generic enough so that other communities could use the same components for their own community sites. The infra is already at a usable state, and we can add new sites easily with just a few clicks.

Features in this consolidated infra are:
Document/Content management (Plone built-in)Calendar system (powered by solgema.fullcalendar addon)Conference/BarCamp system (powered by collective.conference addon, which was developed for FUDCon Kuala Lumpur 2012)Blog (powered by Products.Scrawl)Simple yet powerful theming engine (powered by plone.app.theming/ Diazo) - Check out Diazo, you'l…

HOWTO: Mirroring Yum repositories using Yum-Utils

As promised before in one of my previous post, a Howto on how to mirror and manage yum repositories using some of the utilities in yum-utils.

The first step is, well, of course, is to get yum-utils from fedora repository
yum install yum-utils

Reposync
Reposync is a utility for mirroring and synchronizing local copy of a yum/rpmmetadata repository.

This utility is very useful if you wanted to make a yum repository mirror. Before this, I used "wget -R -np -N" but this method is a little bit tedious and it doesnt work with repos that didn't use directory listing. Plus, it also download together additional site stuff that I don't need/want and it doesn't verify checksum of the downloaded packages.

Mirroring a repo using this utility is easy, just execute this command
reposync -r <repoid> -a <arch> -n
and the repo will be mirrored in a folder with the same name of the repoid in the directory you executed the command. Eg: you executed the command in /mnt/storage/mi…

Tee'ing Python subprocess.Popen output

A little hack for python coders out there who wanted to have a functionality similar to the unix's tee command for redirecting output to multiple places.


import sys
from subprocess import Popen,PIPE
p = Popen(['put','command','and','arguments','here'],stdout=PIPE)

while True:
o = p.stdout.readline()
if o == '' and p.poll() != None: break
# the 'o' variable stores a line from the command's stdout
# do anything u wish with the 'o' variable here
# this loop will break once theres a blank output
# from stdout and the subprocess have ended