Friday, July 15, 2011

How to make a blogger template : the body and APIs

In previous post ,I told you about the header of a blogger template . The next part should be the CSS part  ,but as you know ,we use the CSS to define how elements in body displayed (post color ,font,size...),so in this post ,I want to show you what is in the body of a template APIs and HTML markup ,then we will back to the CSS to define how they displayed .


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 page element such as a picture, a blogroll, or anything else we can add from the Page Elements tab.
In body part ,we can add HTML around 'sections' or add them 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,' with 'yes' as the default. If it is 'yes' ,you can add more widgets to this section ,in the section area ,you will see a link 'Add a Page Element' ,if the value is 'no' ,there's nothing .
  • growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.
In a section ,there are many widgets , each widget can do a specific task ,for example : showing blog post content ,showing 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 for different works , but in the simplest form ,it's only

<b:widget id="header" type='HeaderView' locked="yes"/> </b:widget/>
with nothing inside ,just a placeholder indicating how the widget should be handled in Page Elements tab .

A widget may have the following attributes:

  •     id - (Required) May contain letters and numbers only, and 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

That's all for sections and widgets ,in the next post ,we will examine what is in a widget and APIs :D

No comments:

Post a Comment