How To: Create Blogger Template From A Static HTML Design

I write my experience create Blogger template here and here. Now, we are going to learn how to transform an existing static HTML  template. We will learn customization look and feel with Blogger's predefined CSS tag. Original design available here, working example  here, exercise template example here.

Original static HTML terrafirma1.0.

This template has four main section: #header, #primarycontent, #secondarycontent and  #footer. Remove all static content between those tag, and add section tag to make it "widgetable".

<div id='header'>
<b:section class='header'  id='caption'  lock='true' showaddelements='no'  />
</div>

<div id='primarycontent'>
<b:section class='post' id='main' /> //existing CSS use 'post' to name stylize post content
</div>

<div  id='secondarycontent'>
<b:section class='content' id='sidebar' /> //existing CSS use 'content to name stylize this section.
</div>

<div id='footer'>
<b:section class='content' id='foot' />
</div>

See example here

Special predefined CSS class by Blogger:
View source by right click on example page, you will see CSS class that generated by Blogger:
.titlewrapper // to give style the space title of blog
.title //to give style on blog title text
.descriptionwrapper //to give style on space of description text
.description // to give style the blog description text
.post-header //to give style post header area (post title, date, author etc)
.post-title //to give style the post title 
.post-footer //to give style the footer of post (usually labels, comments, etc.) 
.widget-content //to give style on content of widget
...and so on...


Heading
-Blog title is h1
-Post title is h3
-Widget title is h2, example you name gadget Popular Post it will be printed <h2>Popular Posts</h2>


I hope it useful :)