How to make a blogger template : how blogspot widget work?

In previous posts ,you known the meaning of Blogger data tags ,now in this post ,we will see how blogspot widget ,the most important widget in blogger work .
Blogpost widget is the widget that show the process and show the blog post .
It contain many 'includable' inside ,this structure you can get from the post on widget.
Now let't see how it work

In a template , Blogpost widget start with this line
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

The id can be vary in different template ,but the type="Blog" is required
In this widget ,there are some 'includable' :

• <b:includable id='main' var='top'> : main includable ,this includable will take the main task for processing data and show the result to user computer
•  <b:includable id='nextprev'>: this includable will add the link 'next page' ,'prev pag' at the bottom ofhomepage ,archive page ,and add the link 'next post','previous post' at the bottom of single post .
• <b:includable id='mobile-nextprev'> this includable do the same task to nextprev includable above ,but this includable will work if you browse the blog in mobile .
• <b:includable id='post' var='post'> this includable will process the data of each post ,it will show post title,post body ,date .... if you are reading a single post ,and show post summary if you are inhomepage or archive page
• <b:includable id='mobile-index-post' var='post'> like 'post' includable above ,but it work on mobile
• <b:includable id='postQuickEdit' var='post'> this includable will add an small pencil at the end of post ,that allow blog owner can edit the post easily ,click on this pencil ,blog owner will be redirected to post editing window ,don't need to back to dashboard ,and search for post which he want to edit from post list.
• <b:includable id='shareButtons' var='post'> this includable will show a list of share buttons at the end of post
• <b:includable id='comments' var='post'> show all comments of each post .
• <b:includable id='commentDeleteIcon' var='comment'> add a recycle bin symbol next to the comment ,allow blog owner delete unwanted comment .
• <b:includable id='comment-form' var='post'> show the comment form bellow the post ,allow reader to write their comment .
• <b:includable id='backlinks' var='post'> show the backlinks to a post .
• <b:includable id='backlinkDeleteIcon' var='backlink'> show the recycle bin icon next t'o the backlink
• <b:includable id='feedLinks'> and <b:includable id='feedLinksBody' var='links'> :show the feed links to blog and to each post .
• <b:includable id='status-message'> show the status message ,like this ' show all post under label xyz '

Blogpost work as diagram bellow

1,When Blogpost widget start working
2,It start a loop statement to looping through all post 
3,If the post counting number i smaller than the number of post ,it will call the post includable for showing post data (post title ,post body ,author ,labels...)
4a,4b,4c In the post includable ,if the current page is a single post ,it also call other includables such as post edit icon ,comment ,comment form ... ,but if current page is homepage or an archive page ,these includable will not be called .
5,Go to the next post and back to the check point at step 3
6,In case of finish looping through all posts ,back to the main includable 
7,Call next prev includable (or feedlinks,backlinks...if necessary) ,add the link to next and previous post to the end of page .
8,Finish

In these includable ,beside data tags ,we can add HTML ,javascript to make it display as we want .
Combine this post with previous post on data tags,widget structure ,looping and conditional statement ,you will get a big picture on how a template work when reading the code .
Hope this post helpful to you.

This is a guest post by Nhamngahanh. If you want to see post more, check here.