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 3:   TEMPLATE BODY AND API'S





The <body> part of a template is made up primarily of 'sections' and 'widgets'.
Sections mark out areas of a page, such as the sidebar, footer, etc.
There are many widgets in a section.
A widget is an individual element of a page such as picture, blogroll …. We can add widget from Layout tab in Blogger Dashboard.
In body part ,we can add HTML tags around ‘sections’ or add HTML tags inside ‘widgets’.
Each section has an opening and a closing tag, looking something like this:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

A <b:section> tag can have the following attributes:

  • id - (Required) A unique name, with letters and numbers only.
  • class - (Optional) Common class names are ‘navbar’, ‘header’, 'main,' 'sidebar’ and ‘footer’. You can use any name if you want, or use google default. You can write some CSS tags to define how a 'class' look in CSS section.
  • maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
  • showaddelement - (Optional) Can be 'yes' or 'no’. 'yes' is the default. If 'yes', you can add more widgets to this section, in the section area, you will see a link 'Add a Page Element' in Layout tab of Dashboard, ‘no’ means nothing.
  • growth - (Optional) Can be 'horizontal' or 'vertical', 'vertical' is the default. This determines whether widgets within this section are arranged side-by-side or stacked.
There are many widgets inside a “section” for specific tasks, for example: showing blog post content, rss links …
A widget also has an opening and a closing tags, like this:

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

A widget can contain HTML tags and Blogger APIs, but it can be in this simplest form:

<b:widget id="header" type='HeaderView' locked="yes"/> </b:widget/>
Nothing inside, just a placeholder indicating widget position in Page Elements tab.

A widget may have the following attributes:

  • id - (Required) contain letters and numbers. Each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
  • type - (Required) Indicates what kind of a widget it is, and should be one of the valid widget types listed below.
  • locked - (Optional) Can be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
  • title - (Optional) A display title for the widget. If none is specified, a default title such as 'List1' will be used.
  • pageType - (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of thier pageType.)

The types of widgets you can specify are:

•        BlogArchive
•        Blog
•        Feed
•        Header
•        HTML
•        SingleImage
•        LinkList
•        List
•        Logo
•        BlogProfile
•        Navbar
•        VideoBar
•        NewsBar

Share this post

Advertisement

15 comments

  1. Thanks bro,i learnt my lessons well & fun today! :D

    ReplyDelete
  2. Is it possible to insert static post inside each category. i.e all category will have its own unique static post

    ReplyDelete
  3. I ve prob with my template.. I uploaded Simplexworldnews template in my blog.. everything is fine... but when i try to install the main Category(below the Header image).. the sidebar widgets are comming at bottom of my blog. I ve tried all ways.. but cudnt solve my prob. please do help me on this issue.

    ReplyDelete
  4. @Gowtham : You can see the answer in comments bellow the post of SimplexWorldnews . Search before ask ,you will get better and faster answer

    ReplyDelete
  5. Terrific quality blog. Thanks

    ReplyDelete
  6. good post...mega jd terbantu.....

    ReplyDelete
  7. Thanks for another wonderful post. Where else could anybody get that kind of info in such a perfect way of writing? I've a presentation next week, and I'm on the look for such information.

    ReplyDelete
  8. How to make a music portfolio blogspot template...http://tympanus.net/codrops/2010/07/26/music-portfolio-template/

    ReplyDelete
  9. Thank you nhamngahanh for sharing your knowledge with us, all the previews posts about how to make a Blogger thème are really useful, I suggest you to classify them together in a singel post and present them as a list, and that will be great,
    Hope hou all the best,
    Aziz

    ReplyDelete

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