Step by step: How to design a blog template.

1.Graphic design.
You should draw your web first, you can find many web templates on internet or you can refer it to blogger templates.

If you know about photoshop, you should you it to design your template, to design your web graphic by photoshop, please refer to design your web templates by photoshop .

When you finish to design your template, please go to step 2.

2.Using CSS, Javascrip and HTML to design your web template.

You should have a lite knowledge about CSS and HTML, if you don't have it, please refer to CSS tutorial, Javascript Tutorial and HTML tutorial

2.1 Using CSS to define your blog body
Define your font and color that you will use in your blog.
Define your blog background, you should use background color and an image to define your background

Exp: I define my body blog by:
body {
font-family:Arial, Helvetica, sans-serif; font-size:12px;
color:#444444;
background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat;
}
In this my blog I use background color is #483521 and I also use a very small image that it has been repeated to create my blog body.
2.2 Define your menu

You should define some CSS class to use in the header, footer, the right and the left side of your blog.

In my blog I use this CSS class for my header, There is the definition:

#nav-bar {
font-size:11px;
color:#333333;
height:26px;
padding:0px;
width:938px;
background:#ecf3f5;
border:solid 1px #DEDEDE;
}
#nav-bar a:link, #nav-bar a:visited {
color:#000000;
text-decoration:none;
font-size:11px;
text-transform:uppercase;
font-weight:bold;
margin-right:2px;
border-right:solid 1px #DEDEDE;
}
#nav-bar a:hover {color:#666666;}

And I use it by using a DIV tag has ID="nav-bar"

<div id='nav-bar' >

3.Using javascript

Adsense script, it the javascript code that it is used to show your adsense in your blog, this is and example of my adsense script that I use in my blog template.

Exp: Define Adsense script
< script type='text/javascript' >
google_ad_client = "Your Adsense Number";
google_ad_host = "Your Adsense Number";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_channel ="117893460x";
google_ad_type = "text_image";
google_color_border = "#ffffff";
google_color_bg = "#fff6d7";
google_color_link = "#333333";
google_color_url = "#999966";
google_color_text = "#335533";
</script>

And show it by using the line :

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type='text/javascript'>

</script>


You can use the Adsense script every where in your blog to place your advertises.




4.Apply your CSS, Javascript and HTML to blogger

When you finish to design your web template, know you can apply it to your blogger.
In Layout option of blogger, please click on Edit HTML and then copy all your CSS and HTML code to replace the CSS, Javascript and HTML of the exist blog and you will have your new layout that you have design in step 2 and step3.