How to make a blogger template : inside widget - includable

Blogger team tried to make their product easier to use and custom for all users with Template Design function. If you want small changes in fonts, background, layout..., this function can help. But if you want more to make your blog look like a professional website? It's time you need to learn structure of blogger template, APIs, javascripts ... to make a custom template. This serie: “How to make a Blogger template” will take you step by step to creating your own. I will try to make it short, simple and easy to understand, hope it helpful for you .
----------------------------------------------------------------------

Chapter 1  Blogger Template Structure

Chapter 2  Template Header

Chapter 3  Template body and API's

Chapter 4  Inside widget - "Includable"

Chapter 5  Blogger data tags 1

Chapter 6  Blogger data tags 2

Chapter 7  How Blogger widget work

Chapter 8  General steps of making a Blogger template

----------------------------------------------------------------------

CHAPTER 4:   INSIDE WIDGET - "INCLUDABLE"

In chapter 3, you already know about body section of a template, in this post, we will take a closer look on widget - essential parts of body section, and what is inside widget.

As we know, a widget has an opening tag and a closing tag, and structure like this:

<b:widget [...attributes...]>
</b:widget>

for example a header widget:

<b:widget id="header" type='HeaderView' locked="yes"/>
..............
</b:widget/>

A widget contains blocks of code 'includable' inside, like this:

<b:widget [...attributes...]>

 <b:includable id='main' var='xxx'>
    [insert whatever content you want here]
</b:includable>

<b:includable id='yyy' var='yyy'>
    [insert whatever content you want here]
</b:includable>

<b:includable id='zzz' var='zzz'>
    [insert whatever content you want here]
</b:includable>
 ..........
</b:widget>

There must be one ‘includable’ block with id=”main” in each widget. It usually contains most content of a widget, and other ‘includable’ support the main ‘includable’ in processing data. For insance, you have a widget showing the subsription form, in this widget, there’s a main ‘includable’ will show the form and result, other ‘includable’ will get data form, connect to subscription database, processing data …etc...

An includable followed with these attributes:

• id: (Required) A unique identifier made up of letters and numbers.
• var: (Optional) An identifier made up of letters and numbers, for referencing data within this section.

When a widget goes to work, the main includable get data, pass to other 'includable' for processing and then get the result back to main “includable” for displaying through a call stament.
The call statement has form:

 <b:include name='includable id' data='variable'/>

Beside the main 'includable', you can set the id of other 'includable' any name you want.
If you are familiar with 'function ' and 'procedure' in computer programing language, you can understand 'includable' and 'widget' terms easily. The main ‘includable’ works as main program, while other ‘includables’ work as functions or procedures.

Another example, if you want to show post’s title:

<b:includable id='main'>
        <b:include name='show_post_title' data='i'/>
  </b:includable>
<b:includable id='show_post_title' var='p'>
............  
show post title of the post has id='p'
..........
</b:includable>

In the code above, the main ‘includable’ has a call stament for ‘includable’ name 'show_post_title'. ID of the post which you want to show post title is passed to ‘show_post_title’ includable by variable 'i' in the main includable. The includable 'show_post_title' gets the value of 'i' and assigns ‘i’ to another variable 'p', then show title of the post which has id='p'. The result is returned to the main includable and displayed as title of the post which has id='i'.

‘Includables’ are most useful if you have repeated block of code in many places. You can write the code once, put it inside a <b:includable>…….</b:includable>, then use this ‘includable’ wherever you want. Using ‘includable’ is not required, you can stick with one  main includable only (Note that the main includable is included automically to widgets – so adding <b:include name='main'/> is unnecessary.)

Statements

Like any computer programing language, Blogger allows us to use some statements such as “loop” statement and “condition” statement in an 'includable'.

Loops

The b:loop statement repeat a block of code multiple times. This is most commonly used for printing out posts, comments, or labels, etc. The general format of loop statement:

<b:loop var='identifier' values='set-of-data'>
   [repeated code goes here]
</b:loop>

The 'identifier' is a counting variable which its value stands for each item in the list (list of blog posts, list of comments…). For instance, there are 10 posts in a blog need printing out to monitor by loop statement, so value of “identifier” is an array from 1 to 10, if value of “identifier” equal 5, the block of code inside b:loop statement is processing post number 5 and so on…
Name of “indentifier” depends on you, but a common convention is to simply call this "i".  

If / Else

This statement is used to execute a block of code where conditions met. The general format is this:

<b:if cond='condition'>
   [code to execute if condition is true]
<b:else/>
   [code to execute if condition is false]
</b:if>

The b:else tag is optional. Without b:else, code only executed when condition return true. The closing </b:if> is required.