How to Create Blogger Template

Hi Friends today I am going to teach you How to Create Blogger Template. First of all, We will create a template that will have four main elements, 

1) Blog Background, 2) Blog Header, 3) Blog Main Page  and 4) Blog Footer


So we need to create the four elements, You may use photo editor software like Adobe Photoshop, Corel Draw, Paint, etc. for the same

Here's are the steps to design blog templates:

Step # 1. Create a design or layout in photo-shop.

Blogger Template Design Step # 2. On the backgroun part you can use image or it could be a Pattern or Tile.

3. Make Slices of every part (Background, Header, Main and Footer)

it should look like this :

Blog Background Design

Blog Header Design

Blog Main Page Design

Blog Footer Design

4. Upload your part image on the webhosting like geocities or on the image hosting like photobucket.

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 above template or this template
3. Find this code

body { 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 bold text with your image location
5. Then find this code, and change the blod 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 bold text with your image 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 bold 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 code width: 898px it'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; }

This code width: 445px; is size/widht of main, 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 code width: 153px; is widht of your right sidebar. and this code width: 195px; is widht your left sidebar. And this code padding-right: 50px; is gap of text on the right sidebar with right line. And this code padding-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-repeat top center; }

This code height: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 code width: 898px; height:80px; is widht and height of your footer.

9. Try to modify and preview it until looks good.
10. If it looks good you can save it.

GOOOD LUCK!!!!!!