How to Create a template on Blogger

^_, Friday, November 21, 2008

in the following tricks, we will try to create a template that most simple and most easily. In fact, create a template in the bloggers should understand about CSS and HTML, but for this time we only need a little ability, it is because we will create a template that most simple, but not one, although how simple but the results can be extraordinary, depending on the desainernya. It's like I start my house on a patient I think.

You know, the easiest way to create a template that is the blogger to download a template and we brain-atik own, so we do not need to create from the beginning. To practice the material this time we try to use a template that I had it made, downlad material here. Before we begin I suggest I create a new blog though I think you damage the original blog.

Design Phase

Templates that we make here will have four main components, namely Background, Header, Main and Footer. such as that in the following picture:

So you have to make these four components. How it what? you should be able to use the software image editors such as Photoshop, Corel, Paint, etc.. Desainya ways of making more details like this:
1. Create a design like the picture above
2. In the background earned a "Tile / Pattern" (small and repeatedly).
3. Main again to be divided into several columns, may be 2 column, 3 column, or the smell. And usually consists of a main part of (the post) and sidebar.
4. Then cut perbagian.
5. For the full header motongnya must.
6. The background, and main dan footer

I cut it a little because of the "tile"

7. Design over a cut will be like this:

background

header

main

footer

8. Upload pieces are on a webhosting service or other storage files. For instance, in GeoCities or one and etc..

Now we enter the stage in the preparation of bloggers. eight steps. Ohya I downloaded was not bahanya, I have not downloaded the first over. Ok we started:
1. Back to bloggers and to the menu "Edit HTML".
2. Being click the "Brows" to upload the template you donwload I was.
3. Search and code like this:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }

4. Replace the bold text with the location of the background image you create.
5. Search code like this:

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Replace the bold text with the location of the image you play.
7. Search code like this:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Replace the text with a bold image header.
9. Search code like this:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Replace the text with bold gambara foter.
11. There are still some things that you should take note. try to find the following code:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

code width: 898px width of the blog shows you, you can change them according to your wish, but must be adapted to the width of the image design you create.

#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; }

code width: 445px; is a wide region that contains the main posts, you can alter.

#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; }

code width: 153px; is the width of the right sidebar. And the code width: 195px; is the width of the left sidebar. Continuous code padding-right: 50px; distance between the contents of the note or the right of the sidebar with the right boundary. Code and padding-left: 10px; is the distance between the content of the sidebar to the left of bounds left.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

code width: 898px; height: 80px; is the size width and height of the footer.

12. So I try to finish it in the preview of the template you, is the glue? or destroyed?
13. I have been in the Save.

: f finally finished I also make the article about the creation of a template, so tired? I remember once again this is a method to create templates that are easy and simple, so the content One of the more complex the template again, munkin sometime we will detail parts of the template