Finally, in the fifth article of this series, we arrive at the core includable of the Blog widget, the post includable. So far, we've had an overview of the Blog widget, looked at the status-message, comments and next/previous posts sections. What's remaining to be addressed is the post section.
This is what controls the appearance of the most critical content of a Blogger blog, the posts. If you open your template in Edit HTML mode and click on the ‘Expand Widget Template’ checkbox, you can see the post includable defined as follows.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
…
<b:includable id='post' var='post'>
</b:includable>
…
</b:widegt>
…
<b:includable id='post' var='post'>
</b:includable>
…
</b:widegt>
The <b:widget> section with the type=’Blog’ is the entire Blog widget and inside that, what goes in between <b:includable id='post' var='post'> and </b:includable> is the post includable.
First, let’s see the main sub sections of this includable, illustrated by the figure below.
The outer most element is the post hentry section. This is divided in to three sub elements, namely, the post title, the post body and the post footer. The post footer is in turn divided in to three more sub elements.
The above abstracted diagram is of little use. To make the real connection between all these code and an actual blog post, let’s map them on to a real blog post. The following illustration is just that.
The above figure overlays few rectangular regions on top of a screenshot of an actual blog post. The post title and post body sections are visible clearly. It is the post footer and its sub sections that are not so prominent. It should be now clear to you that the author name, time stamp, labels etc. that appear at the bottom of a post are in fact contained in the post footer section.
For example, the display of post labels is handled by this piece of code.
<div class='post-footer'>
…
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
...
</div>
…
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
...
</div>
The post-footer-line-3 is empty by default.
After a long series of articles (that spanned about 5 months due to time constraints) about the Blog widget, I assume that you are now confident enough to look under the hood to explore the structure of the Blog widget. Go ahead and take peak at the widget’s code.
Finally, you might ask, “What’s the use of knowing this anyway?”. Though for the most part you don’t have to meddle with the code underneath, knowledge of what controls the display of your posts can become handy when things go wrong sometimes. For example, see this thread on the Blogger Help Group where one blogger had a problem of missing the Next Previous post links from his blog and how it could be corrected by adding the missing ‘include’ statement for that section.
