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



Because we don’t need to edit anything in 1st section of Blogger template, So we move to section 2 – the header. It is the first thing we should care for a blogger template.

In a default blogger template, there are two lines in this section:

<b:include data='blog' name='all-head-content'/>
The first line
<b:include data='blog' name='all-head-content'/>
insert necessary meta tags to the header. If you view source code of a page, you will see something like this:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
Instead of  <b:include data='blog' name='all-head-content'/>

The next line:

is rendered to the <title> tag:
<title>blog titles .....blah blah ...</title>  
What should we do with header?
  • You can add your own meta tags for 'site description' ,'keywords' , like these:
    <meta content='your blog description goes here' name='description'/>

    <meta content='your blog keywords ....' name='keywords'/>   
  • Add your own favicon:
    <link href='link to your favicon.ico' rel='icon' type='image/'/>
  • Add link to external script files or css files.


In Blogger ,we can add meta tags for keywords and description depends on current page by using following code:
<b:if cond='data:blog.pageType == "index"'>
......... meta tags for the homepage ....
<b:if cond='data:blog.pageType == "archive"'>
....meta tags for category page (or archive page)....
<b:if cond='data:blog.pageType == "item"'>
.... meta tags for single post ...


- Show the meta tags for homepage in header and blog title in title if the current page is homepage ,
- Show the meta tags for category page in header and blog title in title if the current page is archive/category page ( page that contain a list of posts under a specific category ).
- Show meta tags in header and title of post in title if the current page is a single post.

By using this code ,we can narrow the meta tags (keywords, page description) and title for every page. Although we can't add keywords, page description for a specific post, but it's still better than do nothing, isn't it?

Share this post



  1. Awesomely cool!!!! Always want to know those bytes!
    Eagerly waiting for the next part.

    Anyway, please don't use green highlight as it's hard to read.

  2. nice series of articles. plz avoid green highlighting

  3. Hi.. i tried to understand how the header works. But i've got troubled when i post my single page link in Facebooks. and The title looks like this :

    Pemerintah tidak efektif, Republikan penyebabnya #navbar-iframe { display:block } #related-posts...

    My original link is :

    can you help me fix it..?


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