Dear Friend,
This is the second part of my article,in which I explain what consists of a widget. Below is again the code from the last time.
01. <b:widget id='Label1' locked='false' title='Labels' type='Label'>
02. <b:includable id='main'>
03. <b:if cond='data:title'>
04. <h2><data:title/></h2>
05. </b:if>
06. <div class='widget-content'>
07. <ul>
08. <b:loop values='data:labels' var='label'>
09. <li>
10. <b:if cond='data:blog.url == data:label.url'>
11. <data:label.name/>
12. <b:else/>
13. <a expr:href='data:label.url'><data:label.name/></a>
14. </b:if>
15. (<data:label.count/>)
16. </li>
17. </b:loop>
18. </ul>
19.
20. <b:include name='quickedit'/>
21. </div>
22. </b:includable>
23. </b:widget>
Now that we know a little bit what that does, what can we do to alter its appearance, or improve it to make the widget looks different?
1. Omit a feature:
As a simplest hack of all, just remove line 15, where the line tells Blogger to print the label count along with the label name, and you're done.
As a good precaution, if you're not sure if you really want to remove the line or not, you could comment it out, so Blogger could ignore the line (or lines) while reading the template. to do that, put these special code <-- and --> in front and at the end of the line
<!-- (<data:label.count/>) -->
Here's the result:
2. A simple change of appearance:
Instead of a list, we can simply make it a paragraph, consists of many labels, separated by a character. To do that, change the code between line 7 and 18 to become:
07. <div>
08. <b:loop values='data:labels' var='label'>
09. <span>
10. <b:if cond='data:blog.url == data:label.url'>
11. <data:label.name/>
12. <b:else/>
13. <a expr:href='data:label.url'><data:label.name/></a>
14. </b:if>
15. <!--(<data:label.count/>) -->
16. </span> *
17. </b:loop>
18. </div>
Here's the result:
What we've done is to rename the "ul" (unordered list) tags to become "div" tags, and to rename "li" tags for each label to become "span" tags. Finally, the " * " at the end of line 16 is to separate labels with "*"
A much improvement of this code would be to add JavaSript code to dynamically examine the label count, then adjust the span tag to show different text height per label, and other extra twists such as color, or font, to make this little hack become a label cloud.
3. Adding a simple tweak to existing code:
Suppose you want your reader to open a new window every time he or she clicks on the label, simply add this code to line 13:
13. <a expr:href='data:label.url' target='_blank'><data:label.name/></a>
You can apply this trick to other widget as well. One of the question I got recently from a reader is how to create a new window every time the user clicks on a link for the link list widget. To do so, look for the widget:
<b:widget id='LinkList1' locked='false' title='Link List' type='LinkList'>
then this line,
<li><a expr:href='data:link.target'><data:link.name/></a></li>
and alter it to become:
<li><a expr:href='data:link.target' target='_blank' ><data:link.name/></a></li>
4. Mixing of the above:
Yet, there are also ways to mix and match elements to create new solutions. For example, suppose we like our "tags/labels/categories" naming, but we're not sure if the rest of the world have similar names. One way to quickly check that is to use our labels, but the link background is a combination of technorati syntax (http://www.technorati.com/tag/)instead of the default blogger tag search, and our label. Simply change line 13 to show like this, and the result is sweet:
<a expr:href='"http://www.technorati.com/tag/" + data:label.name'><data:label.name/></a>
5. Reorganizing code and add CSS to turn the label widget into a completely different thing:
This takes more thinking upfront, but the result is sweet. You can see a demonstration of such hack here:
http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html.
6. Combining with JSON callback technique:
Since we know the label name, we can send the name to blogger to receive data back on all the posts belong to each label. The result would be like a site map, where each label shows its belonging post headers. I might implement this hack in the future, as all the background code is already existed in my other JSON hacks.
Altering the logic code of a widget
Surprisingly enough, it takes only two major language constructs to convey most of the blog's data and transforming it into a webpage, and another two constructs to organize code into understandable chunks and to call them. They are:
1. The If statement
2. The Loop statement
3. The includable/include statements
- I think this is a major achievement of the template designers. Even though this is not a new idea, as it is already implemented in other languages such as PHP, and even the old blogger, it is still a very interesting and remarkable achievement.
- The new Blogger template indeed uses XHTML extensively, so that when the page loads, what it sees in term of HTML tags, it will render exactly like that to the sceen. When it encounters a b:if and b:loop tags, on the other hand, it will render the suitable chunk of HTML or yet other template code based on the situation at hand. This fact alone makes great use of existing HTML tags, as the template designers safely ignore basic language features such as file I/O access, math, database retrieval syntax and command, etc.
- Each widget also acts in its own isolated island, as none of the code from one widget could be accessed from another. To do that, you need to cut and paste the code. This way, bugs are isolated and easier to debug.
- In Blogger template, as the same case with Classic Blogger, there is no construct on how to write data back to the server. I think this is such an excellent idea, as the blogger doesn't have to deal with another yet level of complexity.
- Another thing that I like about the New Blogger template is that names are broken down into understandable "sub" names, instead of the Classic Blogger way. This makes it easier to work with, or at least to guess the possible name for the feature.
The future of Widgets
Widgets, except the "Blog Posts" and "Archived" ones, are relatively easy to understand and to hack, once you know the concepts. They are also very limited for "tweaking" activities, since there are not much data inside them, and there are basically two mentioned simple constructs: if and loop. But once they are combined with the power of JavaScript and JSON, as seen in the NEO template from Ramani and from some other recent hacks, they are getting really interesting to think about and to implement.
And don't count Blogger out either. There might be other new widgets already in store for us, they are just waiting for the green light to see the day.
The future of the New Blogger template and its wonderful widgets, in my mind, looks pretty good as there are plenty of room to play with and to improve.
Cheers,
Hoctro.