The template is a crucial element of the new Layout Blogger blogs. It defines the arrangement of the main post column and the sidebar, layout of blog elements such as the posts, widgets, headers etc. and also the fonts and colors of its look and feel. Understanding the template is, therefore, very useful in understanding how your blog behaves.
In two previous articles we looked at the primary components and the basic skeleton of a Blogger template. In this article, we will dig in to the more specific topic of widgets. More precisely, we are going to see how widgets get instantiated.
Instantiation has a very specific meaning in a technical context. In programmers' jargon, it means creating a specific instance from a generic template. In laymen terms, think of a template as a mould and instantiation as the act of moulding out a shape from that mould. So, the widget we see in the template is the mould and when the blog is actually viewed in a browser window, what we see is the moulded shape (or the instantiated widget).
Let's look at an example to be more clear about this instantiation process.
Consider a simple Text widget with a title and some sample text in its body. If you go to Layout -> Edit HTML, all you see as your widget is a single line similar to the one shown below.
If you click on the Expand Widget Templates check box, the above single line will be expanded to the complete widget shown below.
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
The 4 lines shown in blue instructs Blogger to include the title of this widget if the title is not empty. The key thing to note is the absence of the actual title here. What the template has is the XML element <data:title/>. Similarly, the 3 lines shown in red represent the body of the widget using the XML element <data:content/>. The line in green is what embeds the code needed for the Quick Edit (i.e. Screwdriver and Wrench icon you see when you are logged in to your blog) function.
<data:title/> and <data:content/> are special instructions to Blogger. When the blog actually loads up in a browser (i.e. when someone visits your blog),these two XML elements get replaced with the actual title and the content, fetched from the Blogger database.
Once the above widget is instantiated, the resulting HTML code you see is as follows.
<h2 class='title'>Test Widget</h2>
<div class='widget-content'>
This is to a sample text widget.
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?... title='Edit'>
<img alt='' src='http://www.blogger.com/img/icon18_wrench_allbkg.png'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
Here are the key changes.
- The <b:widget> element is replaced with an HTML div element.
- <b:includable> and <b:if> elements are not present
- <data:title/> is replaced with the actual title "Test Widget"
- <data:content/> is replaced with the actual content "This is to a sample text widget."
- The quickedit line has stuffed in all the code needed to affect that behavior
This is how most of the widgets you see in Blogger get instantiated. The Blog widget, however, has some complex instantiation and we will take a look at it in another article.
