Customizing a blogger template or creating it from scratch is not very hard work. You just need to understand some basic HTML and css. Mostly css part because blogger template is a xml file. Css part will change the look of your page and you can tweak css on the existing blogger template and design it according to your need. But if you plan to change the flow of elements or fully customized template you will also need some basic google atom xml syntax.

Create a demo blog in blogger:

Here in this post we’ll create a blogger template from scratch. First make a demo blog and change it’s visible settings to private. You can do so by going to the dashboard of your new demo blog then go to Settings >> Basic >> Permissions >> Blog Readers. Set it to Private. Then write some 4 or 5 posts. Now we’ll create a xml file in our computer which will be our blogger template.

Create a new xml file for blogger template :

Create a new xml file anywhere on you computer.On Windows make sure it’s a xml file. Now we’ll write the basic code which will make our template. We’ll create a header, blog area, sidebar and a footer. Here is the xml code :-

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html expr:dir='data:blog.languageDirection' 
      xmlns='http://www.w3.org/1999/xhtml' 
   xmlns:b='http://www.google.com/2005/gml/b' 
   xmlns:data='http://www.google.com/2005/gml/data' 
   xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<!-- title of the page -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title> 
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<!-- Put your css style here. -->
<b:skin><![CDATA[
.wrapper{
width:960px;
margin:0px auto;
}

.header{
width:100%;
height:130px;
}
.menu
{
    width:auto;
    height:38px;
    float:right;
}
.blogcontent{
width:100%;
}
.leftcol{
width:68%;
height:500px;
float:left;
}
.rightcol{
width:32%;
height:600px;
float:right;
}
.footer{
width:100%;
height:60px;
background-color:gray;
text-align:center;
padding-top:10px;
}
.clear{
clear:both;
}
]]></b:skin>

</head>

<body>
<div class='wrapper'>
<div class='header'>
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
</div><!-- end Header div -->
<nav class='menu'><!-- your menu --></nav>

<div class='blogcontent'>
<div class='leftcol'>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
 </b:widget>
</b:section>
</div><!-- end mLeft div -->
<div class='rightcol'>
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>

</b:section>
</div>
<div class='clear'></div>
</div>
<footer class='footer'> your Footer info</footer>
</div>
</body>
</html>

Here at the very top is the xml declaration , then HTML 5 declaration and then there is the Blogger  related namespaces.These namespaces are like backbones because they provide the basic functionality and data fetching. Now in the head part we have included the blog so that we can fetch information about the blog, in this case we want to show the title of the blog as the title of the webpage. If it’s our homepage then the page’s title will be the Blog name. And if we are on any post or “item” of our blog then the page title will be the title of the post followed by the blog name for example :” This is post | My Blog name”. For this we have used the if-else statement. What it’s basically doing is only checking if the pagetype is “index” ( means homepage ) then display blog Title or else display the post title followed by blog title.

After the title there is skin tag. This the place where we put the css style for our blog. Here i have added some codes which gives a basic layout to our blog. We’ll add more codes as we’ll go through this tutorial.

The <body> area :

To design our page first I’ve made a wrapper div container which will contain every thing. I’hv set it’s left and right margin to auto, so our wrapper div will be at the center of our page. Inside the wrapper div there are three divs for our Header , our blog content and one for our footer. You can also add nav element for site navigation.Here i’ve added a menu. Inside the Header div we’ve added a section with id and class of header. Section are those area in blogger where blogger places  the “widgets”. As in our example we’ve added a widget with id Header1. This will show us the header of our blog.

Also our header section has a attribute maxwidgets=”1″. This is used to set the maximum number of widgets a section can have. This means that our header section can have only one widget. Setting showaddelement=”no” means we’ve disabled the widget adding option.

Now in our blog content div we’ve added two divs with class name “leftcol” and “rightcol”. Leftcol will contain the blog widget. In our example i’ve added a section with class name main and i’ve added a blog widget in it. The Rightcol div will contain our sidebar. Also we’ll define some areas here to show Ads. Right column div have a section where we’ll add our sidebar widgets like Popular posts, Archive etc.

Upload Custom blogger template to our Demo blog :

Now we’ll upload our template to our demo blog so that we can do further customization to it. Google doesn’t provide any tool for template development so from here we’ll do all coding in blogger template HTML editor. Now go to your blog dashboard >> template >> Backup / Restore and upload your custom template. Blogger will automatically add the existing widgets to your new template. If some sidebar widgets appears below the blog widget either delete or drag them to your sidebar area from layout option of your blog’s dashboard.This post was just an introduction of blogger template development. In next coming posts we’ll play with css and blogger widgets codes to make our blog more beautiful.