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



In this chapter, we will combine all things from previous chapters to one and see how a widget works.
In a template, Blogpost widget starts with this line:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
The id can be vary in different template, but type="Blog" is required
In this widget, there are some 'includable's:

  • <b:includable id='main' var='top'>: main includable, this includable will take the main task for processing data and send the result to monitor.
  • <b:includable id='nextprev'>: this includable will add the link 'next page', 'prev pag' at the bottom of homepage ,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 in homepage 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, Blogpost widget starts working.

2, It starts a loop statement to loop through all posts.

3, Check value of counting variable “i”. If “i” smaller than the number of posts, call “post” includable for showing post data (post title, post body ,author, labels...).

4a,4b,4c, In the “post” includable, if current page is a single post, it calls other includables such as post edit icon, comment, comment form ... . If current page is homepage or an archive page, these includables 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, 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 includables, beside data tags, we can add HTML, javascript to make it display as we want.

Share this post



  1. well defintion for widgets things nice

  2. I think you want to aware people about Xml Language
    It's good for you and all people ,they wnats to learn xml.Thanks

  3. Thanks for the post.Very useful.Looking forward to designing part.

    p.s: I think there is something wrong with your commenting system.I have tried commenting from google chrome for several times, but my comments are not showing up here.Only in this sute I have this problem.

    I'm now using firefox, hope this works!

  4. You are sharing information in some tough language. When you are using blogger then it's really simple and easy to use. When you can change your style or everything you can change it.

  5. I see many post about How To Make blogger template, can you advice me if i want to start edit my Template used in Gaptek, what post is better i read first ???

  6. I will have to try this.

  7. well ... i m new to the arena of blogger world ... can u help me out the ABC level of Blogging

  8. How to make Nav For Advensed ??

  9. @Angga-Fian : Don't understand what you meant :(( Just add a widget and add adsense code into widget content .

  10. nice information, thanks bro...

  11. I installed a new template in my blog and a rubish gadget or something named DEFINITION LIST appear on right side of footer. how can I remove this? not apperaing in layout menu and i am not good in html. How to remove it. You can check out that here


Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers