Tutorial to Create Blogger Template

This tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, althought this is a simple methods but it can produce a beautifull template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing a template. Ok lets begin.Before we begin I suggest you to create a new blog,we don't wont to destroy your blog..
Alll right, now we will arrange these part to the HTML. 1. Go to blogger then go to "EDIT HTML" menu.2. Click on the"Brows"button to upload template. 3. Find this codebody { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://blogoholic.info/files/bg.jpg') repeat-x top left; }


4. Change the text with your image location 5. Then find this code, and change the text with your image location :#center {background: #ffffff url('http://blogoholic.info/files/body.jpg') repeat-y top center;} 6. Find the code below and change the text with your image location:#header { margin: 0; height:196px; location:#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; } 7. Find the code below and change the text with your image location:#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') repeat-y top center; } 8. Now find the code below outer-wrapper {width: 898px; margin: 0px auto 0; text-align: justify; }this codewidth: 898pxit's the widht of your blog, change it according to your image.#main { float: left;width: 445px;margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; } text breaking sidebar float in IE */ overflow: hidden; } This codewidth: 445px;is size/widht ofmain, you can change it.#sidebar { float: right;width: 153px;padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }#ads-wrapper {float: left;width: 195px;padding-left: 10px; word-wrap: break-word; overflow: hidden; } This codewidth: 153px;is widht of your right sidebar. and this code width: 195px;is widht your left sidebar. And this codepadding-right: 50px;is gap of text on the right sidebar with right line. And this codepadding-left: 10px;is gap of text on the left sidebar with left line.#header { margin: 0;height:196px; width:898;color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-retop center; } This codeheight:196px; width:898;is height and widht of your header, Change it according to your Header Image.#footer { margin: 0;width: 898px; height:80px;padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; } This codewidth: 898px; height:80px;is widht and height of yourfooter. 9. Try to modify and preview it until looks good. 10. If it looks good you can save it.GOOOD LUCK!!!!!! READ MORE...