Design Phase
Template that we will create here has four main components namely Background, Header, Main and Footer. as in the following figure:
So you have to make the four components. How to make it how? You should be able to use the software image editor like Photoshop, Corel, Paint, etc.. Ways of making desainya more details like this:
1. Create a design like the image above
2. In the background try to be "Tile / Pattern '(small and repetitive).
3. To Main subdivided into multiple columns, be 2 columns, 3 columns or whatever. And usually consists of the main parts (posts) and sidebar.
4. Then cut partially.
5. For the full header should cut it.
6. The background, main and footer cut it a little aja because it is "tiled"
7. The design above if cut would be like this:
background
header
play
footer
8. Upload pieces on a webhosting or other file storage services. For example on geocities or Photobucket etc.
are you understand?
Now we enter into the preparation stage of the blogger. gini steps. Ohya've downloaded has not been danger, if not first download on that. Ok we go:
1. Back to bloggers and to the menu "Edit HTML".
2. Then click the "Brows" to upload the template you've donwload who earlier.
3. Then Find the 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 that you create.
5. Find the 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 your main image.
7. Find the 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 bold text with the header image.
9. Find the 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 bold text with Gambara foter.
11. There are still some things that you should pay attention. try searching the following codes:
# Outer-wrapper {width: 898px; margin: 0px auto 0; text-align: justify;}
code width: 898px indicates the width of your blog, you can change it as you wish, but must be adapted to the width of the design drawings that 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 playing area that contains the post, 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;}
code width: 153px; is the width of the sidebar to the right. And the code width: 195px; is the width of the left sidebar. Continue to code padding-right: 50px; the distance between the posts or browse the right sidebar to the right boundary line. And code padding-left: 10px; is the distance between the contents of the left sidebar to the left boundary line.
# Header {margin: 0; height: 196px; width: 898; color: $ pagetitlecolor; background: url ('http://kendhin.890m.com/template/head.jpg') no-repeat top center;}
code height: 196px; width: 898; is the height and width of the header, you can adjust the size of your header.
# Footer {margin: 0; width: 898px; height: 80px; padding: 0px; background: url ('http://kendhin.890m.com/template/foot.jpg') no-repeat top center;}
code width: 898px; height: 80px; is a measure of the width and height of the footer.
12. Well if already completed trial in the preview your template, is in conformity kah? or destroyed?
13. If already on Save.
: F finally over I make an article about the making of templates, tired huh? but remember once again this is a method of creating a template that is easy and simple, so sebenrnya contents of the template more complicated, munkin sometime we'll discuss the details of part-bagina template.
OK ...... CONGRATULATIONS STRIVE